1.1 CSS3基础动画与变换

本文简单的梳理了CSS3中新加的能做到动态效果的CSS3标签，以总结归纳为主。

目录:

1. CSS3
2. 阴影
3. 线性渐变
4. 径向渐变
5. 2D变换
6. 3D变换
7. 过渡
8. 动画
9. 简单案例:轮播图

---

CSS3

介绍

CSS3是CSS技术的升级版本，CSS3完全向后接荣，不必改变现在的设计。

浏览器前缀

是什么

因为CSS3还没有完全成熟，所以每个浏览器的支持情况还不一样。所以会因为浏览器内核不同。浏览器厂商会使用不同前缀进行区分css属性。

为什么

如果是一些以实验性质的属性，加上内核前缀，可以使其支持。

怎么用

以animation为例，

		animation: ; 原先的标签
		-o-animation: ;			 欧朋支持
		-webkit-animation: ;	 chrome和safari支持
		-ms-animation: ; 		 ie支持的
		-moz-animation: ;		 火狐支持

不过随着现在的发展，已经有很多浏览器都已经支持了基本的动画标签，所以在学习的时候，可以直接使用animation进行编写，不过在企业开发中，就需要谨慎的把所有的可能都写上了.

---

阴影text-shadow/box-shadow

是什么

盒子阴影和文字阴影

怎么做

text-shadow

text-shadow: 8px 1px 14px red,8px 1px 50px black;

位置可正可负,可以使用，分割 添加多个阴影
水平偏移 垂直偏移 模糊度 颜色

text-shadow: 8px 1px 14px red,8px 1px 50px black;		

box-shadow

水平偏移 垂直偏移 模糊度 颜色

box-shadow: 0px 0px 50px bluet;  

五个参
水平偏移 垂直偏移 外延值 模糊度 颜色

box-shadow: 0px 0px 20px 50px bluet;  

inset属性
能把阴影设置在内部 通过把阴影设置成inset可以做到点击按下的效果

box-shadow: 0px 0px 50px blue inset; 

---

线行渐变/linear gradients

background: linear-gradient(direction,color-stop1,color-stop2...);

可以 向任何线性方向进行渐变

渐变颜色本质上是一个渐变图片，所以我们要在background-image里进行设置

也可以直接使用background设置

 background: linear-gradient(red,blue);

默认是从上到下进行渐变

可以用第一个参数来指定位置，

to top /to left/to right/to right bottom 也可以给角度，来进行倾斜的显示

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

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

给予比例进行渐变

background: linear-gradient(to right bottom,red 10%,yellow 30%,blue 60%);

重复渐变

background: repeating-linear-gradient(to right bottom,red 10%,yellow 30%);

---

径向渐变

background: radial-gradient(center,shape,size,start-color.color.....)

渐变的中心默认时center 表示在中心点，渐变的形状是eliipse 表示椭圆形
值可以是circle或ellipse

位置
中心（at center center）
语法（at x y）都是从左上角原点作为参考点。 x，y。也可以是百分比

background: radial-gradient(at 30% 30%,blue,red);

大小
最近边 closest-side
最远边 farthest-side
最近角 closest-corner
最远角 farthest-corner
形状
ellipse 椭圆 默认值
circle 圆

background: