css渐变+过渡

一、css3渐变效果

• 1. 线性渐变（Linear Gradients）-可以设置一个起点或一个方向

background-image: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

(默认：从上到下） -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

-moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

linear-gradient(red, blue); /* 标准的语法 */

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

（从左到右） -o-linear-gradient(left, red, blue); /* Opera 11.1 - 12.0 */

-moz-linear-gradient(left, red, blue); /* Firefox 3.6 - 15 */

linear-gradient(to right, red , blue); /* 标准的语法 */

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

（对角） -o-linear-gradient(left top, red, blue); /* Opera 11.1 - 12.0 */

-moz-linear-gradient(left top, red, blue); /* Firefox 3.6 - 15 */

linear-gradient(to bottom right, red , blue); /* 标准的语法 */

background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */

（有指定角度） -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */

-moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */

linear-gradient(180deg, red, blue); /* 标准的语法 */

• 1. 径向渐变（Radial Gradients）- 由它们的中心定义

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

（默认情况） -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

-moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

radial-gradient(red, green, blue); /* 标准的语法 */

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

（颜色结点不均匀分布） -o-radial-gradient(red 5%, green 15%, blue 60%);

-moz-radial-gradient(red 5%, green 15%, blue 60%);

radial-gradient(red 5%, green 15%, blue 60%);

background: -webkit-radial-gradient(circle/ellipse, red, yellow, green); /* Safari 5.1 - 6.0 */

-o-radial-gradient(circle/ellipse, red, yellow, green); /* Opera 11.6 - 12.0 */

-moz-radial-gradient(circle/ellipse, red, yellow, green); /* Firefox 3.6 - 15 */

radial-gradient(circle/ellipse, red, yellow, green); /* 标准的语法 */

（circle 表示圆形，ellipse 表示椭圆，默认是椭圆）

c、重复线性渐变 repeating-linear-gradient()

d、重复径向渐变 repeating-radial-gradient()

二、过渡属性

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

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

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

transition-timing-function :ease：（慢速开始，然后变快，然后慢速结束 默认）

linear：（匀速）

ease-in：(加速)

ease-out：（减速）

ease-in-out：（先加速后减速）

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

steps（） 实现一个关键逐帧动画的功能