day14

一：動畫：

第一步：定義動畫;

動畫的定義直接在style標籤裡進行

方法1：@keyframes 動畫名
{
/關鍵幀/
from{}
to{}
}

方法2：@keyframes 動畫名
{
/關鍵幀/0-100%（百分比劃分的是時間，時間劃分一般平均）
0%{}
40%{}
80%{}
}

第二步：使用動畫

（那個屬性使用動畫新增到那個屬性下）

1·1常用：

• animation-name：動畫名；

• animation-duration：時間s/ms；

• animation-delay：延遲執行時間s/ms；

• animation-timing-function：速度狀態；

  （linear(勻速)/ease-in(加速)/ease-out(減速)/ease-in-out(慢-快-慢)

• animation-iteration-count: 數字/infinite(無限次)

複合寫法
​ animation: 動畫名 動畫執行的時間 動畫延遲時間 動畫效果 執行次數

1·2不常用

• animation-direction:
  reverse(關鍵幀反向播放)/alternate(關鍵幀交替播放 0%-100%-0%)

• animation-fill-mode:動畫停止的關鍵幀,使用該屬性的話不可以設定無限迴圈，不然停不下來
  forwards(最後一個關鍵幀)/backwards(第一個關鍵幀)

• animation-play-state:
  running(執行)/paused(停止)

二： 偽元素的選擇器

​ 選中偽元素
​ 父元素::偽元素{}

三：3d屬性

3d屬性的展示：

方法一：搭建舞臺

演示3d效果，需要先搭建一個3d的舞臺（給變形元素的父元素搭建舞臺）
transform-style:preserve-3d;

方法二：景深

perspective:數值px;(近大，遠小)

3·1：位移

（X軸,Y軸在2d上顯示）

z軸位移：

transfrom：translateZ（數值px）->不要使用百分比

X,Y,Z軸都位移：

transfrom：translate3d（X,Y,Z）

3·2，旋裝

（Z軸在2d上顯示）

3·2·1：X軸旋裝：

transfrom：rotateX（數值px）->（正數類似於後仰，負數類似於前撲）

3·2·2：Y軸旋裝：

transfrom：rotateY（數值px）->（正數類似於向下，負數類似於向上）

3·2·3：xyz都旋轉

transform:rotate3d(a,b,c,d)

a b c的取值為 0或者1 0代表不旋轉 1代表旋轉 d 旋轉度數

tranform: rotateX() rotateY() rotateZ();

四： 背部隱藏

​ 設定了透明後，但是不想看到後面的內容，給該元素 backface-visibility: hidden;

五：瀏覽器的字首：

火狐（-moz-）：

• 漸變：background-image：-moz-linear-gradient：（）
• 過渡：-moz-transition：all 1s；
• 2d位移：-moz-transform：translate（）
• 定義動畫：@-moz-keyframes name{}
• 使用動畫：@-moz-animation{}

ion：all 1s；

• 2d位移：-moz-transform：translate（）
• 定義動畫：@-moz-keyframes name{}
• 使用動畫：@-moz-animation{}