动画 | 易学教程

一，背景渐变

.top{
	width:200px;
	height:200px;
	background:-webkit-gradient{linear,0 0,100% 100%,from(#f00)to(#0ff);
	background:-moz-gradient{linear,left top,left bottom,from(#f00)to(#0ff);
}

线性渐变：

background: -webkit-linear-gradient(top,#f00,#0f0,#00f);
background: -webkit-linear-gradient(left top,#f00,#0f0,#00f);
background: -webkit-linear-gradient(90deg,#f00,#0f0,#00f); 从下到上
background: -webkit-linear-gradient(-90deg,#f00,#0f0,#00f);从上到下*/
background: -webkit-linear-gradient(180deg,#f00,#0f0,#00f);从右到左
background: -webkit-linear-gradient(0deg,#f00,#0f0,#00f);从左到右
径向渐变：
background: -webkit-radial-gradient(top,#f00,#0f0,#00f);
background:-webkit-radial-gradient(left top,#f00,#0f0,#00f);

二，过度属性transition

transform:1s 1s width;
linear匀速
ease默认速度
ease-in从慢速开始
ease-out从慢速结束
ease-inout从慢速开始和结束的效果

transition-property:哪个属性有过度，all代表所有
transition-duration过渡的时间
transition-delay过渡的延迟执行时间
transition-timing -function:ease-in-out过渡的时间曲线

三，2d属性transform

1.偏移 translate()

在原来位置上的偏移（完全可以用定位来代替）
一个值是指水平方向
两个值用逗号隔开，一个代表水平一个代表垂直
如果值设置为50%是其自身宽高的一半
可以单独设置x或y
translatex（）或translatey（）

transform:translate(-50%,-50%）;

2.缩放 scale()

在原来宽高的基础上缩放，是原来宽高的倍数。从中心向两端缩放。一个值代表宽高同时缩放，两个值用逗号隔开，第一个代表宽度，第二个代表高。内容也会跟着缩放。

可以单独设置x或y
scalex()或scaley()

transform:scale(0.5)

3.旋转routed()
给定旋转度数，正值是顺时针，负值是逆时针。
只能给定一个值。
默认是在一个平面上旋转，可以给定方向
可以单独设置x或y（x上下方向的旋转,y左右方向的旋转）

transform:routed(45deg);

4.扭曲skew()
给定度数扭曲：设置一个值代表水平，两个值中间用逗号隔开，第一个代表水平，第二个代表垂直，可以单独设置skewx()或skewy().

transform:skew(45deg,20deg);

5.一个元素设置多个属性值时，只写一个transform，多个属性值用空格隔开。
注意书写顺序问题，如果值都一样但是顺序不一样，最终显示结果是不同的。

四，鼠标屏蔽事件

pointer-events: none;

来源：CSDN

作者：Shirley_0513

链接：https://blog.csdn.net/Shirley_0513/article/details/103591515

标签

动画

动漫