CSS3

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）
   //以及各种兼容性写法
}