【十四】CSS3新特性詳情 - javascript,css,css3,前端,less 馳驥動態日志

前言

本篇章主要講述CSS3新特性，如svg、canvans以及動畫。

面試回答

1.canvas畫圓：首先獲取canvas對象，設置好寬高，用getContext方法設置2d繪圖，然後用arc方法進行繪製，arc的參數分別是圓心的x，y座標、半徑、以x軸為基準的起始角度以及結束角度，這裏設置，0到2π即可。

知識點

1.SVG

參考博客：https://juejin.cn/post/6844903589807128590

用處

可縮放矢量圖形(SVG)的一大優勢是它們可以被無限縮放而沒有質量損失之外。

用法

先看一下基礎的標籤

<svg> 包裹並定義整個矢量圖。<svg> 標籤之於矢量圖就如同 <html> 標籤之於一個 web 頁面。
<line> 創建一條直線。
<polyline> 創建折線。
<rect> 創建矩形。
<ellipse> 創建圓和橢圓。
<polygon> 創建多邊形。
<path> 通過指定點以及點和點之間的線來創建任意形狀。
<defs> 定義一個可複用的圖形。初始情況下 <defs> 裏面的內容是不可見的。<defs> 標籤之於矢量圖就如同 <head> 標籤之於一個 web 頁面。
<g> 將多種形狀組合起來。將組合後的形狀置於 <defs> 中可以讓它能夠被複用。
<symbol> 類似於一個組合，但是擁有一些額外的特性。通常被置於 <defs> 標籤中便於複用。
<use> 獲取在 <defs> 中定義的複用對象並在 SVG 中顯示出來。

<body>
  <svg width="750" height="500">
    <defs>
      <!-- x1,y1相當於起點的水平軸、垂直軸座標，x2,y2相當於終點的水平軸、垂直軸座標 -->
      <line x1="3" y1="3" x2="48" y2="3"></line>
      <line x1="3" y1="19" x2="65" y2="19"></line>
      <line x1="3" y1="35" x2="48" y2="35"></line>
      <line x1="3" y1="51" x2="65" y2="51"></line>
      <!--每個逗號分別分割一個點，起點、拐點、終點  -->
      <polyline points="100 3, 130 28, 100 53"></polyline>
      <!-- 矩形：x，y為起點，結合line就可以畫圖了 -->
      <rect x="150" y="3" width="80" height="60"></rect>
      <line x1="150" y1="20" x2="230" y2="20"></line>
      <line x1="160" y1="3" x2="160" y2="20"></line>
      <!-- cx,cy即圓心，rx即x軸的半徑，ry即y軸的半徑，rx與ry相同即正圓，不同則為橢圓  -->
      <ellipse cx="300" cy="50" rx="40" ry="40"></ellipse>
      <!-- 配上ployline就可以是一個播放圖標了 -->
      <polygon points="290 35, 315 50, 290 65" />
      <!-- 多邊形：M表示起點，L表示從上一個點到新點畫一條線，z表示閉合路線，即結束。 -->
      <path
        d="
          M 25 100
          L 65 100
          L 65 140
          L 80 140
          L 45 180
          L 10 140
          L 25 140
          Z
      "
      ></path>
      <!-- 在defs裏，用g標籤包裹，並定義id，可以通過use複用。 -->
      <g id="leftalign">
        <!-- 左對齊圖標 -->
        <line x1="3" y1="3" x2="48" y2="3"></line>
        <line x1="3" y1="19" x2="65" y2="19"></line>
        <line x1="3" y1="35" x2="48" y2="35"></line>
        <line x1="3" y1="51" x2="65" y2="51"></line>
      </g>

      <g id="rightcaret">
        <!-- 插入圖標 -->
        <polyline
          points="
          3 3
          30 28
          3 53
          "
        ></polyline>
      </g>

      <g id="browser">
        <!-- 瀏覽器圖標 -->
        <rect x="3" y="3" width="80" height="60"></rect>
        <line x1="3" y1="19" x2="83" y2="19"></line>
        <line x1="20" y1="3" x2="20" y2="17"></line>
      </g>
    </defs>
    <use href="#leftalign" x="100" y="100"></use>
    <use href="#rightcaret" x="300" y="100"></use>
    <use href="#browser" x="500" y="100"></use>
  </svg>
</body>

<style>
  body {
    margin: 0;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
</style>

2.Canvans

具體可查詢：https://www.runoob.com/jsref/dom-obj-canvas.html

用法

moveTo：將畫筆移動到座標中的某個點
lineTo：將畫筆從它所在的點到另一個點用線連接，參數為結束點
stroke：繪製出通過 moveTo和 lineTo方法定義的路徑
strokeStyle：設置筆觸的顏色、漸變或模式
beginPath：開始一條路徑，或重置當前的路徑
closePath：將當前點與起點相連
fill：將畫筆所圈起來的區域進行顏色的填充
arc：創建弧/曲線（用於創建圓或部分圓）
font：設置文本內容的當前字體屬性。
fillText：繪製"被填充的"文本
createLinearGradient：創建線性漸變
addColorStop：設置漸變對象中的顏色和停止位置。
createRadialGradient：設置放射狀/環形的漸變
fillStyle：設置填充繪畫的顏色、漸變或模式。
fillRect(x,y,width,height) 實心矩形；
strokeRect(x,y,width,height) 空心矩形；
fillText( "Hello world" , 200 , 200 ) 實心文字；
strokeText( "Hello world" , 200 , 300 ) 空心文字；

<canvas
  id="canvas"
  width="300"
  height="150"
  style="border:1px solid #d3d3d3;"
></canvas>
<script>
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d'); /* 創建 context 對象 */
  ctx.fillStyle = 'red'; /* 填充顏色 */
  ctx.fillRect(
    0,
    0,
    100,
    50
  ); /* 4個參數分別是 x y 水平方向和垂直方向,是從左頂點(0, 0)開始的, w h 是繪製的矩形的寬和高了 */
  ctx.moveTo(0, 0); /* 是線開始的座標 參數是 x y 水平方向和垂直方向*/
  ctx.lineTo(100, 100); /* 是線條結束座標 參數如上 */
  ctx.stroke(); /* 開始描繪線 */
  ctx.beginPath(); /* 定義繪製的是一個圓 */
  /* 
        分別有六個參數 前兩個依然是 x 和 y 的是不同的是不是從繪製的圖形的左頂點坐位開始的位置了,而是以圓心作為座標
        第三個是 r 是繪製圓的半徑
        第四個是起始角 從 0 度開始繪製,
        第五個是結束角，2 * Math.PI 是360度的弧度角,半圓的話是(ctx.arc(60, 60, 30, 0, 1 * Math.PI, true))
        第六個是逆時針還是順時針 False 為順時針，true 為逆時針。
    */
  ctx.arc(30, 30, 30, 0, 2 * Math.PI, false);
  ctx.stroke();
  // 填充顏色
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.font =
    '40px 楷體'; /* 40px 是文字的大小 後面的是文字的字體(其他參數建議查詢) */
  ctx.fillText(
    '我是一段文字',
    10,
    60
  ); /* 第一個是文本的內容,後兩個是 x y,最後一個是限制的文本的長度(以像素計)  */

  /* 
        創建漸變  x0    漸變開始點的 x 座標
        y0    漸變開始點的 y 座標
        x1    漸變結束點的 x 座標
        y1    漸變結束點的 y 座標 
    */
  let line = ctx.createLinearGradient(0, 0, 200, 0);

  /*
       第一個值是 介於0.0 和 1.0 之間值, 表示漸變的開始位置和結束位置
       第二個是顏色
    */
  line.addColorStop(0, 'red');
  line.addColorStop(1, 'green');
  /*填充顏色*/
  ctx.fillStyle = line;
  /* 參數分別是 x y w h 水平方向 垂直方向 寬度 和 高度*/
  ctx.fillRect(20, 20, 150, 100);

  /*
        x0    漸變的開始圓的 x 座標
        y0    漸變的開始圓的 y 座標
        r0    開始圓的半徑
        x1    漸變的結束圓的 x 座標
        y1    漸變的結束圓的 y 座標
        r1    結束圓的半徑
    */
  let grd = ctx.createRadialGradient(0, 0, 5, 0, 60, 100);
  grd.addColorStop(0, 'red');
  grd.addColorStop(1, 'blue');
  ctx.fillStyle = grd;
  ctx.fillRect(20, 20, 100, 80);
</script>

canvas 填充圖片

<img src="../avatar.jpg" width="300" height="260" alt="avatar">
<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d'); /* 創建 context 對象 */
    var img = document.getElementsByTagName("img")[0];
    img.onload = function() {
        /* 
            第一個規定要使用的圖像、畫布或視頻
            第二個第三個是 x 和 y 軸的座標
            第四個和第五個是繪製圖片的大小
        */
        ctx.drawImage(img, 10, 10, 150, 100);
    } 
</script>

3.動畫

屬性	含義
animation（動畫）	用於設置動畫屬性，他是一個簡寫的屬性，包含6個屬性
transition（過渡）	用於設置元素的樣式過度，和animation有着類似的效果，但細節上有很大的不同
transform（變形）	用於元素進行旋轉、縮放、移動或傾斜，和設置樣式的動畫並沒有什麼關係，就相當於color一樣用來設置元素的“外表”

動畫涉及這麼幾個屬性，接下來我們一一熟悉:

animation

創建動畫，需要使用animation屬性或其子屬性，該屬性允許配置動畫時間、時長以及其他動畫細節，但該屬性不能配置動畫的實際表現，動畫的實際表現是由@keyframes規則實現。

必需項：animation-name、animation-duration 和 @keyframes規則

animation簡寫：animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

animation 的子屬性有：

animation-name：指定由 @keyframes 描述的關鍵幀名稱。
animation-duration：設置動畫一個週期的時長。
animation-delay：設置延時，即從元素加載完成之後到動畫序列開始執行的這段時間。

animation-direction：設置動畫在每次運行完後是反向運行還是重新回到開始位置重複運行。

值	描述
normal	以正常的方式播放動畫
reverse	以相反的方向播放動畫
alternate	播放動畫時，奇數次（1、3、5 等）正常播放，偶數次（2、4、6 等）反向播放
alternate-reverse	播放動畫時，奇數次（1、3、5 等）反向播放，偶數次（2、4、6 等）正常播放

animation-iteration-count：設置動畫重複次數，可以指定infinite無限次重複動畫

值描述

n 使用具體數值定義動畫播放的次數，默認值為 1

infinite 表示動畫無限次播放
animation-play-state：允許暫停和恢復動畫。

值描述

paused 暫停動畫的播放

running 正常播放動畫

值	描述
n	使用具體數值定義動畫播放的次數，默認值為 1
infinite	表示動畫無限次播放

值	描述
paused	暫停動畫的播放
running	正常播放動畫

animation-timing-function：設置動畫速度，即通過建立加速度曲線，設置動畫在關鍵幀之間是如何變化。

值	描述
linear	動畫從開始到結束的速度是相同的
ease	默認值，動畫以低速開始，然後加快，在結束前變慢
ease-in	動畫以低速開始
ease-out	動畫以低速結束
ease-in-out	動畫以低速開始，並以低速結束
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函數來定義動畫的播放速度，參數的取值範圍為 0 到 1 之間的數值

animation-fill-mode：指定動畫執行前後如何為目標元素應用

值	描述
none	不改變動畫的默認行為
forwards	當動畫播放完成後，保持動畫最後一個關鍵幀中的樣式
backwards	在 animation-delay 所指定的時間段內，應用動畫第一個關鍵幀中的樣式
both	同時遵循 forwards 和 backwards 的規則

@keyframes 規則：

@keyframes animationName {
    0% { 
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

animationName：表示動畫的名稱；
from/0%：定義動畫的開頭;
percentage：定義動畫的各個階段，為百分比值，可以添加多個；
to/100%：定義動畫的結尾；
properties：不同的樣式屬性名稱，例如color、width等等。

例子：

```
<div>
  1111
</div>
<style>
  div {
    animation: fontText 3s;
  }

  @keyframes fontText {
    0% {
      color: #f00;
    }
    100% {
      color: #000;
    }
  }
</style>
```
transition

元素從一個屬性(如color)的某個值(red)過渡到這個屬性的另外一個值(green)，需要一種條件來觸發這種轉變，比如我們平時用到的:hoever、:focus、:checked、媒體查詢或者JavaScript。
transition-duration：transition效果需要指定多少秒或毫秒才能完成，如3s
transition-property：指定CSS屬性的name，transition效果，如width

transition-timing-function：指定transition效果的轉速曲線

值	描述	速度
linear（默認屬性）	規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。	勻速
ease	規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。	快-慢-慢
ease-in	規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。	快-快
ease-out	規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。	慢-慢
ease-in-out	規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。	慢-快-慢
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。	自定義

transition-delay：定義transition效果開始的時候，如1s

例子：

<div></div>
<style>
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f40;
  transition-duration: 1s;
  transition-delay: 1s;
}
div:hover {
  height: 150px;
  width: 150px;
}
</style>

transform

transform看起來有很多屬性，其實我們把常用的總結起來就是下面四個屬性。

translate(移動)

值	描述
translate(x,y)	定義 2D 轉換。
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。

rotate(旋轉)

值	描述
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿着 X 軸的 3D 旋轉。
rotateY(angle)	定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿着 Z 軸的 3D 旋轉。

skew(扭曲)

值	描述
skew(x-angle,y-angle)	定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)	定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿着 Y 軸的 2D 傾斜轉換。

scale(縮放)

值	描述
scale(x[,y]?)	定義 2D 縮放轉換。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。

例子：其中translate可以換成scale、skew、rotate

<style>
#test {
  margin-left: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
@keyframes translate {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(100px, 100px);
  }
}
@keyframes translateX {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100px);
  }
}
@keyframes translateY {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(100px);
  }
}

.translate {
  animation: translate 2s infinite linear;
  background-color: red;
}
.translateX {
  animation: translateX 2s infinite linear;
  background-color: green;
}
.translateY {
  animation: translateY 2s infinite linear;
  background-color: gold;
}
</style>
<body>
<div id="test" class="translate"></div>
<div id="test" class="translateX"></div>
<div id="test" class="translateY"></div>

### 最後

走過路過，不要錯過，點贊、收藏、評論三連~

馳驥動態日志

@moyuzai_zxp616510038

標簽

前端 (1157)

Javascript (735)

vue.js (260)

Css (108)

css3 (54)

less (12)

動態

【十四】CSS3新特性 - 動態詳情

前言

面試回答

知識點

1.SVG

用處

用法

2.Canvans

用法

canvas 填充圖片

3.動畫

animation

transition

transform

Add a new 評論

馳驥 動態日志

@moyuzai_zxp616510038

標簽

前端 (1157)

Javascript (735)

vue.js (260)

Css (108)

css3 (54)

less (12)

動態

【十四】CSS3新特性 - 動態 詳情

前言

面試回答

知識點

1.SVG

用處

用法

2.Canvans

用法

canvas 填充圖片

3.動畫

animation

transition

transform

Add a new 評論

馳驥動態日志

【十四】CSS3新特性 - 動態詳情