1.css3的漸變,分為線性漸變和徑向漸變,下面舉例說明
1.1線性漸變寫法是linear-gradient如下圖
屏幕快照 2016-04-07 下午9.22.22.png
結(jié)果如右邊所示,括號中第一個值代表方向,從那個方向開始;后面接的都是顏色,可接多個顏色,百分比的含義是30%是紅色,30%到50%是紅色到黃色的漸變,50%到80%是黃色到藍色的漸變.剩下的20%是藍色.前面的-webkit-是適配瀏覽器的問題
1.2徑向漸變,寫法是radial-gradient如下圖
屏幕快照 2016-04-07 下午9.38.36.png
結(jié)果如右邊所示,括號中第一個值代表方向,從那個方向開始;后面接的都是顏色,可接多個顏色,百分比的含義是30%是紅色,30%到50%是紅色到黃色的漸變,50%到80%是黃色到藍色的漸變.剩下的20%是藍色.前面的-webkit-是適配瀏覽器的問題
2.css3的倒影,寫法box-reflect,如下圖
屏幕快照 2016-04-07 下午9.52.54.png
結(jié)果如右邊所示,第一個值代表方向,above代表向上倒影,below代表向下,left代表向左,right代表向右.第二個值代表間距,后面可以接漸變,這個可以使用在圖片里面.但要注意透明度的問題
文字的倒影也是一樣的
3.css3的過渡,寫法主要是transition,如下圖
屏幕快照 2016-04-07 下午10.09.14.png
結(jié)果是正方形跑到距離左邊300px距離的地方,顏色變成了黃色.
4. 2D變形,寫法是主要是transform.如下圖
屏幕快照 2016-04-07 下午10.21.55.png
