1、css3渐变
1)线性渐变(兼容性写法)
background:linear-gradient(to right top, #fff, #000 ); //标准写法
background:-webkit-gradient(linear,left bottom, right top, from(#fff), to(#000));//webkit旧式写法
background:-webkit-linear-gradient(left bottom, #fff, #000); //webkit新式写法
background:-moz-linear-gradient(left bottom, #fff, #000);//Mozlilar
background:-o-linear-gradient(left bottom, #fff, #000); //opare
2)经向渐变(先不做了解)
2、transform(变形)
格式:transform:rotate(旋转) translate(移动) skew(扭曲) scale(缩放) matrix(矩阵)
1)rotate:
transform:rotate(45deg);
正值为顺时针,负值为逆时针;
2)translate:(值为百分比之时是基于元素自身)
transform:translate(x,y)
当然也有transform:transilateY/X(10px);
3)scale:
transform:scale(x,y)
x和y都是以1为参考,比如transform:scale(0.8,0.8),当然也存在scaleX/Y;
4)shew:
transform:shew(x,y)
x,y的值为deg,如rotate;
3、transition: transition-property(执行变换的属性) transiton-duration(变换持续的时间) transition-timing-function(速率变化) transition-delay(变换延迟时间);
1)transition-property:none(无属性改变);all(所有变换属性都要进行变换);indent(元素属性名);
2)transition-duration:s为单位
3)transition-timing-function:ease(逐渐变慢)
linear(匀速)
ease-in(加速)
ease-out(减速)
4)transiton-delay:动画执行开始前的延迟,例如1s,则过了一秒之后才会执行动画。
4.animation
定义:
@keyframes 'name' {
0%{
css属性
}
50%{
css属性
}
100%{
css属性
}
}
使用:
#box {
animation:name duration timing-function delay interation(循环次数,默认infinite) direction(默认normal)
//以及各种兼容性写法
}