CSS3渐变、过渡、转换、动画

. 过渡

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

 

CSS3渐变的分类

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（radial-gradient）- 由它们的中心定义

 

1、从上到下

 

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

 

#grad { background-image: linear-gradient(#e66465, #9198e5); }

 

2、从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad { 

height: 200px; background-image: linear-gradient(to right, red , yellow);

}

3、对角

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad {

        height: 200px; background-image: linear-gradient(to bottom right, red, yellow);

}

4、对角使用多个颜色结点

带有多个颜色结点的从上到下的线性渐变：

#grad { background-image: linear-gradient(red, yellow, green); }

 

使用透明度（transparent）

 

从左到右的线性渐变，带有透明度：

 

#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

CSS3 径向渐变

 

1、 颜色结点均匀分布（默认情况下）

 

#grad { background-image: radial-gradient(red, yellow, green); }

 

2、颜色结点不均匀分布

 

#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

 

3、设置形状

 

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

 

#grad { background-image: radial-gradient(circle, red, yellow, green); }

(3) translate() 方法

div { transform: translate(50px,100px);

-ms-transform: translate(50px,100px); /* IE 9 */ 

-webkit-transform: translate(50px,100px); /* Safari and Chrome */

}translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

 

(3) rotate() 方法

 

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

 

div { transform: rotate(30deg);

 

-ms-transform: rotate(30deg); /* IE 9 */

 

      -webkit-transform: rotate(30deg); /* Safari and Chrome */ 

 

}rotate值（30deg）元素顺时针旋转30度。

 transform-origin: right top; 设置旋转轴心

 

(4) 、scale() 方法

 

ms-transform:scale(2,3); /* IE 9 */

 

 -webkit-transform: scale(2,3); /* Safari */ 

 

transform: scale(2,3); /* 标准语法 */

 

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

 

(5) 、skew() 方法

 

div { transform: skew(30deg,20deg);

 

-ms-transform: skew(30deg,20deg); /* IE 9 */ 

 

-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 

 

}

 

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。