隨著移動設(shè)備的普及,越來越多的網(wǎng)站會考慮到移動端的瀏覽體驗。而在移動端的設(shè)計中,往往需要運用到某些特效來增強用戶的交互體驗。CSS3在移動端的應(yīng)用中特別重要,因為它可以通過一些簡單的規(guī)則,讓網(wǎng)站做出很炫酷的效果,而且并不需要使用JavaScript或其他腳本。
/* 毛玻璃效果 */ .blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }
舉例來說,毛玻璃效果可以讓圖片或背景看起來虛化一些,使得界面更具層次感。這個效果在CSS3中可以通過filter屬性中的blur()函數(shù)實現(xiàn)。
/* 漸變背景色 */ .gradient-bg { background: -webkit-gradient(linear, left top, left bottom, from(#00b0ff), to(#008eff)); background: linear-gradient(to bottom, #00b0ff, #008eff); }
另外一個CSS3的重要特性是漸變。漸變可以被用在背景顏色、字體和邊框等方面,但其中最常見的一種使用方式就是做漸變背景色。
/* 3D旋轉(zhuǎn)效果 */ .flip-box { -webkit-perspective: 800px; perspective: 800px; } .flip-box-inner { position: relative; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
最后一個例子是3D旋轉(zhuǎn)效果。這個效果可以讓網(wǎng)站元素在鼠標(biāo)懸停時進行類似翻牌的旋轉(zhuǎn)動畫。通過CSS3中的transform屬性和perspective屬性就可以輕松地實現(xiàn)這個效果。
總之,在移動設(shè)備中使用CSS3特效的好處是顯然的。CSS3可以讓設(shè)計師制作出非常炫酷的效果,而且無需借助JavaScript或Flash。所以,無論你想實現(xiàn)何種交互效果,都可以考慮使用CSS3。