day14

目录

1.动画

1.创建动画

2.使用

1.动画名称

2.动画持续时间

3.运动曲线

4.动画延迟时间

5.运动次数

6.运动的方向

7.运动状态

8.简写

2.3D

1.创建3D：

2.3D动画

1.平移：

2.旋转

3.景深（透视）：近大远小

---

1.动画

1.创建动画

a. @keyframes name{

from{}

to{}

}

b. @keyframes name{

0%{}

50%{}

100{}

}

2.使用

animation: name duration timing-function delay iteration-count direction fill-mode; 

1.动画名称

animation-name: run;

2.动画持续时间

animation-duration: 2s;

3.运动曲线

animation-timing-function: linear;

ease:由慢到快

ease-in:由快到慢

linear:匀速

cubic-bezier(0.13, 0.95, 1, 1)

4.动画延迟时间

animation-delay: 2s;

5.运动次数

animation-iteration-count:4 ;

n:具体次数

infinite：无线循环

6.运动的方向

animation-direction: alternate-reverse;

normal:默认正常方向

reverse:反方向运动

alternate:正反交替

alternate-reverse:反正交替

7.运动状态

animation-play-state: paused;

running:默认值运动

paused:暂停

8.简写

animation: run 2s linear 1s infinite alternate paused;

2.3D

坐标轴

x：

y：

z:屏幕的正前方是Z轴的正方向

1.创建3D：

1.创建3D的大盒子（舞台）

transform-style: preserve-3d;

2.旋转舞台

transform:rotateY(75deg)

2.3D动画

1.平移：

transform:translateX()

transform:translateY()

transform:translateZ()

transform:translate3d(100px,0,0)

2.旋转

transform:rotateX()

transform:rotateY()

transform:rotateZ()

transform:rotate3d(1,0,0,30deg)

3.景深（透视）：近大远小

perspective:900p;

取值范围一般900px-1200px，值越小出现透视效果

创建：

1.给3D舞台在创建一个盒子

2.给盒子添加 perspective:1200px;

3.元素背面不可见

backface-visibility:hidden;