h5 day14笔记 2021.09.02

景深：远小近大  100~1200px之间的整百值

1）可以在父级元素上添加 perspective:1200px  （主要方式）

2）可以在子级元素上添加 transform:perspective(1200px)

3D：

实现3D场景：transform-style：preserve-3d  （默认值为flat   2D空间）---给父级元素添加

3D位移：transform：translate3d（x，y，z）/translateZ（）

3D旋转：transform：rotate3d（1，1，0，30deg）       --x  y  z以矢量值表示，0关1开

---有多个功能函数的时候，可以写在一起 之间用空格隔开（先位移再旋转缩放）

---如transform: translateX(200px) rotateY(60deg);

动画：

过渡和动画都可控制元素在浏览器中运动，区别是：

---过渡需要人为触发，如hover、点击等事件；动画不需要，浏览器加载时就会自动执行；

帧动画的使用：

1）定义/声明帧动画          @keyframes：动画名（自定义）{运动方式}

--单次运动  from{   } to{   }   ；

--循环运动 0%{初始状态属性}     50%（中间再可以添加关键帧）     100%{结束状态属性}；

2）执行/调用动画             属性{ animation: divMove 3s linear infinite }

动画的名字 animation-name

动画运动的持续时间 animation-duration

动画的运动的类型 nimation-timing-function

动画的延迟 animation-delay

动画的运动次数 animation-iteration-count ：数字/infinite（无线循环）

动画运动方向 animation-direction：normal（顺时针）/reverse（逆时针）

可以动画暂停和运行 animation-play-state：running/paused

简写/复合写法   animation：名字  时间  linear  infinite；

注意：1）设置动画设置定位属性 相对+绝对定位；

2）设置位置的时候 位置的属性必须相同；

3）名字和时间已经可以调用动画执行了；