2022-05-27

网页默认效果是2d平面

transform：translate3d（X,Y,Z）

实现元素空间位移效果

透视、视距、景深

perspective属性实现透视效果（缩写PP）

添加给使用了3d属性的最近一级的父元素

perspective取值在400px-1200px

通俗点就是眼睛距离屏幕的距离。

实现进大远小，近实远虚。

pp给谁添加？给具有3d属性的盒子的最近一级父元素添加

pp是什么意思？视距，透视，景深

pp给了之后会实现什么效果？近大远小，近实远虚

pp是怎么理解的？例如 pp:800px?==>起始距离屏幕800px的地方安排一只眼睛去看屏幕

空间旋转

使用rotate实现元素空间旋转效果

使用“左手法则”

一个点，或者一条线，在平面直角坐标系是不占位置的

perspective只是增加了近大远小的视觉效果，并不是真正的开启了3d

立体呈现

transform-style：preserve-3d

（缩写tfs）转换-样式：保持-3d

添加给具有3d属性的子元素的最近一级的父元素。与（PP）相同

animation动画

定义动画

在定义动画的时候，如果动画的起始状态和调用这个动画的盒子本身的属性值是一样的，那么from就可以省略不写。（优化写法）

@keyframs 动画名字 ｛
​
from｛
​
规定刚开始的状态
​
｝
​
to ｛
​
规定结束的状态
​
｝
​
｝

调用动画

animation ：名称 时间

百分比可以实现阶段性的动画

同上0%可以省略不写

动画的注意点

1.动画的名称不能为running，否则动画不生效；

2.多个动画之间的名称不能重复；

3.一次动画完成后默认是回到初始状态（直接回去）

animation复合属性

延迟时间：动画开始执行之前要等待的时间s/ms

动画播放次数：infinite 无限次播放

动画播放方向：alternate交替播放

速度曲线：默认ease；

1、linear匀速播放

2、steps（次数）一般配合精灵图使用

执行完毕时的状态：forwards 动画会停在动画结束时的状态；

注意点：

动画名称和播放一次动画的时长必须写，其他属性需要就写；

注意点：

动画名称和播放一次动画的市场必须写，其他属性需要就写

forwards不能和infinite结合使用，否则不生效

animation里面属性值 不分先后顺序

当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间

[动画复合属性的注意点]  

动画需要记住的属性值

动画名称与动画时长为动画的必须属性

速度曲线：linear匀速的

延迟时间：一定出现在动画市场之后

重复次数：infinite无限次播放

动画方向：alternate交替播放

执行完毕时的状态：forwards动画会停在动画结束时的状态。不能和infinite结合使用，否则不生效。

需要认识的

定义动画

@keyframes change {
        15%{
          width: 200px;
          height: 200px;
          background-color: darkblue;
          border-radius: 10%;
        }
        30%{
          width: 300px;
          height: 300px;
          background-color: darkcyan;
          border-radius: 60%;
          

    }
    60%{
      width: 100px;
      height: 50px;
      background-color: aqua;
      border: 50px solid #dca;
      border-radius: 30%;
    }
    100%{
      width: 600px;
      height: 500px;
      background-color: darkgoldenrod;
      border-radius: 50%;
    }

过渡能使用的属性动画都能用

使用动画

animation: change 3s linear 0.5s forwards alternate;

amimation-play-state:paused;

暂停动画

速度曲线

linear匀速播放，一般用在补间动画

steps（数字）一般用在逐帧动画

逐帧动画小案例

• `*{
• margin: 0;
• padding: 0;
• box-sizing:
• border-box; }
• .box {
• height: 140px;
• width: 140px;
• background:
• url(./images/bg.png);
• animation: box 2s alternate infinite,
• people 2s steps(12) infinite alternate;
• }
• /* 定义动画一，盒子移动 */
• @keyframes box {
• to {
• transform: translateX(600px) rotateZ(360deg);
• }
• }
• /* 定义动画二，人物移动 */
• @keyframes people {
• to {
•    background-position: -1680px 0px;
• }        
• }`