day14动画3d

一、景深概念: 远小近大

​ 两种用法 100px~1200px

​ 1.在父级元素上使用 perspective:1200px 通常/* 最佳的观察位置 */

​ 2.在子级元素上使用 transform:perspective(1200px)

二、3d的概念:

animation: 名称 时间 方式(linear) 次数(infinite)

​ - 浏览器是2d空间 只有x轴和y轴

​ - 浏览器形成3d空间 就会多一条Z轴

​ 形成3d空间属性 transform-style

​ - flat 默认值 2d空间

​ - preserve-3d 形成3d空间 多了Z轴

​ 注意:要给父级添加此属性

​ 1.3d的位移属性 transform

​ .功能函数:translate()

​ - translate(x,y)

​ - translateX()

​ - translateY()

​ - translateZ()

​ - translate3d(x,y,z)

​ 2.旋转的属性 transform

​ 功能函数:rotate()

​ - rotate()/rotateZ() 默认方向 Z轴

​ - rotateX()

​ - rotateY()

​ - rotate3d(前三个是x,y,z的矢量值,角度值) 0/1

    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
        }
        div{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            /* 动画的名称 */
            /* animation-name: divMove; */
            /* 动画的运动时间 */
            /* animation-duration: 2s; */
            /* 动画运动的方式 */
           /*  animation-timing-function: linear; */
            /* 动画的延迟 */
            /* animation-delay: 1s */
            /* 运动次数 */
           /*  animation-iteration-count: infinite; */ /* 无限循环 */
            /* 运动的方向 */
            /* animation-direction: alternate-reverse; */ /* reverse反向的 */
            /* 复合属性 简写方式 */
            /* animation: 名称 时间 方式 次数 */
            animation: divMove 2s linear infinite
        }
        section:hover div{
              /* 动画的运动状态 */
              animation-play-state:paused    /* running运动 */
        }
        @keyframes divMove{
            /* 起始位置的属性 */
            /* from{left: 0;top: 0} */
            /* 结束位置 */
            /* to{left: 400px;top: 0} */
            0%{left: 0;top: 0}
            25%{left: 400px;top: 0}
            50%{left: 400px;top: 400px}
            75%{left: 0;top: 400px}
            100%{left: 0;top: 0}
        }

三、动画

animation: 名称 时间 方式(linear) 次数(infinite)

1.动画的名称

​ animation-name: divMove;

2 动画的运动时间

animation-duration: 2s;

3 动画运动的方式

animation-timing-function：

1.linear 匀速

2. **ease 默认。**动画以低東开始，然后加快，在结束前变慢。

   ​ ease-in 动画以低速开始。
   ​ ease-out 动画以低速结束。
   ​ ease-in-out 动画以低速开始和结束。

3. step-end或者step-start 不要运动的过程 只需要开始和结果

4. *steps(数值) 指定了时间函数中的间隔数量（步长），steps 理解为动画从头到尾，需要多少步来完成。

4 运动次数

animation-iteration-count: infinite;

四、其他

1.1ch 等于一个 0 的宽度！宽度！宽度！

ch还有另一个规则：

• 1ch = 1个英文 = 1个数字
• 2ch = 1个中文

2.解析 animation-fill-mode

动画结束后状态

• aniamtion-fill-mode:forwards | backwards
  • forwards 保持当前位置
  • backwards 回到初始位置