一、3D变换
transform-style建立3D空间
transform-style: preserve-3d;
perspective 景深
perspective: 300px;
perspective- origin 景深基点
// 即站在那个方位看物体，默认是center center
// left top即左上角位置看物体
perspective-origin: left top;
transform 新增函数
- rotateX()
- rotateY()
- rotateZ()
- translateZ()
transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg); // 即是旋转效果
transform: translateZ(-100px); // 即往前或往后(放大缩小)，另外效果也受到景深的影响
注: Z轴方向即是垂直于窗口的；
案例: 立体矩形
案例: 轮播图(立体切换效果)
二、animation动画
关键帧——keyFrames
- 类似于flash
只需指明两个状态，之间的过程由计算机自动计算
- 关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)
- 格式1
@keyframes 动画名称
{ 动画状态 }
#box{
// 动画时长、动画名称
animation: 2s Move;
}
@keyframes Move{
0%{
width: 100px;
}
100%{
width: 400px;
}
}
#box{
// 动画时长2s、延迟3s、动画名称
animation: 2s 3s Move;
}
@keyframes Move{
from{
width: 150px;
background: blue;
}
to{
width: 300px;
background: purple;
}
}
animation-timing-function 动画运动形式
- linear 匀速
- ease 缓冲
- ease-in 由慢到快
- ease-out 由快到慢
- ease-in-out 由慢到快再到慢
- cubic-bezier(number, number, number, number) 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-delay 动画延迟
只是第一次
animation-iteration-count 重复次数
infinite为无限次
animation-play-state 播放状态
- running 播放
- paused 暂停
animation-direction 播放前重置
动画是否重置后再开始播放
- alternate 动画直接从上一次停止的位置开始执行
- normal 动画第二次直接跳到0%的状态开始执行
案例: 无缝滚动
作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
