“关键帧”(@keyframes),它的样式规则是由多个百分比构成,如0%到100%之间,分别在每一个百分比中,加上不同的属性,从而让元素达到一种在不断变化的效果。语法规则如下:
@keyframes 动画名称{
0%{元素状态}
。。。
100%{元素状态}
}
animation属性:
- animation-name:@keyframes动画的名称
- animation-duration:动画完成一个周期所花费的时间,默认是0
- animation-timing-function:动画的速度曲线(缓动效果)。默认是ease
- animation-delay:动画开始的延迟时间,默认是0
- animation-iteration-count:动画被播放次数。默认是1
- animation-direction:动画是否在下一周期逆向播放。默认是 ”normal“
- animation-play-state:动画是否正在运行或暂停。默认是”running“
- animation-fill-mode:对象动画时间之外的状态
transform
向元素应用2D或3D转换。该属性允许我们对元素进行旋转,缩放,移动或倾斜。
参数:
rotate(角度值):旋转
translate(x,y):移动
scale(x,y):缩放
skew(x,y):扭曲
matrix(a,b,c,d,e,f):矩阵
对象阴影【box-shadow】
box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
可以使用一个或多个投影,如果使用多个投影时必须要用逗号分开
还可以通过inset来设置对象的内阴影。
背景颜色线性渐变【linear-gradient】
语法:
background:linear-gradient(起点,起点颜色,过渡色【可选】,终点颜色);
起点:top从上到下,left从左到右,left top:左上角到右下角
过渡色:可以插入多个,表示多种颜色的渐变