CSS动画
线性渐变
background-image:linear-gradient(颜色1,颜色2);
渐变方向默认为从上到下
如要改变方向:
background-image:linear-gradient:(to 方向,颜色1,颜色2);
方向可以是对角,也可以是角度(角度deg)
颜色可以添加多种;
颜色后面可以添加百分比或像素设置区域;
重复性渐变:
background-image:repeating-linear-gradient:(颜色1(像素),颜色2(像素));
镜像渐变
background:radial-gradient(颜色1,颜色2)
颜色前面可以定义这是正圆等
at 圆心在哪里、定义园的直径;
动画(transform)
transform实现实现文字或图像的旋转、缩放、倾斜、移动
位移(translate)
transform:translate(X轴的距离,Y轴的距离);
transform:translate(50px,50px);//代表水平方向移动50像素,垂直方向移动50像素
//如果只写一个参数,默认是水平方向的移动,但可以通过
translateX或translateY来设置是水平还是竖直方向的位移;
缩放:(scale)
transform:scale(缩放的倍数,1是正常大小,1以下为缩小,1以上为放大)
旋转:(rotate)
transform:rotate(旋转的度数)
transform-orgin:更改旋转的基准点;
//
transform:rotate(90deg)//代表旋转90度
transform-orgin:bottom left;//代表旋转的中心点在左下
倾斜:(skew)
transform:rotate(X轴的倾斜度数,Y轴的倾斜度数)
transform:rotate(20deg)//代表水平方向的倾斜,倾斜20度
过渡:(transition)
transition:(时间);
transition:1s;//代表从原本的状态变成预设的状态需要1秒的时间进行过渡动画
动画帧(@keyframes)
动画开始from,里面包含动画的初始状态
动画结束to,里面包含动画的结束状态
@keyframes 名字{
from{}
to{
}
}
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode