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
