day14-李大人part1

day14

文章目錄

• day14
• • 一：動畫：
  • • 第一步：定義動畫;
    • 第二步：使用動畫
    • • 1·1常用：
      • 1·2不常用
  • 二： 僞元素的選擇器
  • 三：3d屬性
  • • 3d屬性的展示：
    • • 方法一：搭建舞台
      • 方法二：景深
    • 3·1：位移
    • • z軸位移：
      • X,Y,Z軸都位移：
    • 3·2，旋裝
    • • 3·2·1：X軸旋裝：
      • 3·2·2：Y軸旋裝：
      • 3·2·3：xyz都旋轉
  • 四： 背部隐藏
  • 五：浏覽器的字首：

一：動畫：

第一步：定義動畫;

動畫的定義直接在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{}