1.css3的渐变,分为线性渐变和径向渐变,下面举例说明

1.1线性渐变写法是linear-gradient如下图

屏幕快照 2016-04-07 下午9.22.22.png

结果如右边所示,括号中第一个值代表方向,从那个方向开始;后面接的都是颜色,可接多个颜色,百分比的含义是30%是红色,30%到50%是红色到黄色的渐变,50%到80%是黄色到蓝色的渐变.剩下的20%是蓝色.前面的-webkit-是适配浏览器的问题

1.2径向渐变,写法是radial-gradient如下图

屏幕快照 2016-04-07 下午9.38.36.png

结果如右边所示,括号中第一个值代表方向,从那个方向开始;后面接的都是颜色,可接多个颜色,百分比的含义是30%是红色,30%到50%是红色到黄色的渐变,50%到80%是黄色到蓝色的渐变.剩下的20%是蓝色.前面的-webkit-是适配浏览器的问题

2.css3的倒影,写法box-reflect,如下图

屏幕快照 2016-04-07 下午9.52.54.png

结果如右边所示,第一个值代表方向,above代表向上倒影,below代表向下,left代表向左,right代表向右.第二个值代表间距,后面可以接渐变,这个可以使用在图片里面.但要注意透明度的问题

文字的倒影也是一样的

3.css3的过渡,写法主要是transition,如下图

屏幕快照 2016-04-07 下午10.09.14.png

结果是正方形跑到距离左边300px距离的地方,颜色变成了黄色.

4. 2D变形,写法是主要是transform.如下图

屏幕快照 2016-04-07 下午10.21.55.png

这是一个2D的变形,translateX(100px)代表鼠标移上去正方形沿X轴方向移动了100px的距离,rotateX(180deg)代表鼠标移上去正方形沿X轴方向旋转了180度,scale(2.0)代表鼠标移上去这个正方形的宽和高都变成它原来的两倍.这里所说的X轴是相对于这个div的本身而言的.

对于2D的变形还有"skew"这个是倾斜的意思,用法是一样的

2D的就到这里了,明天重点写3D变形的东西.