一、景深概念: 远小近大
两种用法 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 匀速
-
**ease 默认。**动画以低東开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。 -
step-end或者step-start 不要运动的过程 只需要开始和结果
-
*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 回到初始位置