【CSS动画】渐变,位移、倾斜、过渡、旋转、缩放

CSS动画

  • 线性渐变
  • 镜像渐变
  • 动画(transform)
    • 位移(translate)
    • 缩放:(scale)
    • 旋转:(rotate)
    • 倾斜:(skew)
  • 过渡:(transition)
  • 动画帧(@keyframes)

线性渐变

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

你可能感兴趣的:(css,前端)