H5 线性渐变和径向渐变与过渡

渐变：线性linear  径向radial

背景的线性渐变：

从上到下的 （默认）

#grad {

background-image: -webkit-linear-gradient(red, blue);

background-image: -o-linear-gradient(red, blue);

background-image: -moz-linear-gradient(red, blue);

background-image: linear-gradient(red, blue);

}

从左到右的

#grad {

background: -webkit-linear-gradient(left, red , blue);

background: -o-linear-gradient(left, red, blue);

background: -moz-linear-gradient(left, red, blue);

background: linear-gradient(to right, red , blue);

}

对角的渐变：

#grad {

background: -webkit-linear-gradient(left top, red , blue);

background: -o-linear-gradient(left top, red, blue);

background: -moz-linear-gradient(left top, red, blue);

background: linear-gradient(to bottom right, red , blue);

}

指定角度的渐变：

#grad {

background: -webkit-linear-gradient(180deg, red, blue);

background: -o-linear-gradient(180deg, red, blue);

background: -moz-linear-gradient(180deg, red, blue);

background: linear-gradient(180deg, red, blue);

}

径向渐变同理linear换成radial

css背景相关属性：

background-clip  指定背景的显示范围

• background-clip:border-box;  默认值
• background-clip:padding-box；背景被裁剪到内边距框
• background-clip:content-box；背景被裁剪到内容框
• -webkit-background-clip:text ；

background-origin 绘制背景图像时的起点

• background-origin:padding-box  默认值；
• background-origin:border-box  背景图像相对于边框盒来定位
• background-origin:content-box  背景图像相对于内容框来定位

background-size  背景图的大小

• background-size：200px  100px;  或者  background-size:200%  100%;
• background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• background-size:contain;  保持背景图像本身的宽高比例不变进行缩放。

过渡：

transition-property  需要过渡的样式 ，默认是 all

transition-duration  运动时间 默认是 0 s    

transition-delay  延迟时间 默认是 0 s 

transition-timing-function

运动形式   默认是 ease

1. ease：（慢速开始，然后变快，然后慢速结束） 
2.  linear：（匀速）  ease-in：(加速)
3. ease-out：（减速）
4. ease-in-out：（先加速后减速）
5. cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com
6. steps（） 实现一个关键逐帧动画的功能