前面講過(guò)css3可以替代很多js實(shí)現(xiàn)的效果，其實(shí)很多時(shí)候純css3甚至可以替代圖片，直接用css3就可以畫出一些簡(jiǎn)單的圖片。雖然css3畫出來(lái)的圖片效果可能不如直接用圖片的好，實(shí)現(xiàn)起來(lái)也比較復(fù)雜，最麻煩的是兼容性問(wèn)題，不如圖片來(lái)得直接實(shí)用。但是換一種思路去思考問(wèn)題的解決辦法往往能激發(fā)我們的靈感，也有助于我們學(xué)習(xí)css3。

下面給出的demo里會(huì)有用圖片和純css3實(shí)現(xiàn)的風(fēng)車效果的對(duì)比。

先看看靜態(tài)的效果圖：

下面簡(jiǎn)單介紹一下我是如何用純css3實(shí)現(xiàn)一個(gè)風(fēng)車的動(dòng)畫效果的，

1.畫出風(fēng)車的柱子

我們可以看到風(fēng)車的柱子是一個(gè)等邊的梯形，通過(guò)width,height屬性配合border我們可以實(shí)現(xiàn)很多幾何圖形，如三角形，梯形等等，大家可以參照下面梯形的實(shí)現(xiàn)方法自己試試其他圖形的實(shí)現(xiàn)。

效果圖

2.畫風(fēng)車的軸

這一步比較簡(jiǎn)單，用border-radius圓角屬性可以輕松實(shí)現(xiàn)。

width:4px;  
height:4px;  
border:3px #fff solid;  
background:#a5cad6;  
border-radius:5px; 
效果圖

3.畫風(fēng)車的葉子

風(fēng)車葉子的實(shí)現(xiàn)與柱子的實(shí)現(xiàn)原理相同，只不過(guò)是吧梯形倒過(guò)來(lái)了。

height: 0;  
width: 2px;  
border-width: 50px 2px 0px 2px;  
border-style: solid solid none;  
border-color: white transparent transparent ; 
4.定位風(fēng)車頁(yè)

這里使用css3中transform的rotate（旋轉(zhuǎn)）來(lái)實(shí)現(xiàn)，有一點(diǎn)要注意的是，使用rotate時(shí)先要用origin定位旋轉(zhuǎn)的圓心，默認(rèn)是元素的中心，這里我們要定位在元素的頂部。

-webkit-transform-origin:0px 0px;  
-webkit-transform:rotate(60deg); 
效果圖

用上面的辦法依次畫出三個(gè)風(fēng)車扇面，并且定位好角度。

5.實(shí)現(xiàn)扇頁(yè)的動(dòng)態(tài)效果

靜態(tài)的風(fēng)車畫好了，接下來(lái)我們要做的就是讓它動(dòng)起來(lái)。

前面我們可以把扇頁(yè)定位在軸心元素的子元素，這樣我們只要實(shí)現(xiàn)軸心的轉(zhuǎn)動(dòng)效果就可以讓扇頁(yè)也跟著動(dòng)起來(lái)了。

下面是動(dòng)畫的實(shí)現(xiàn)

@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}} 
把實(shí)現(xiàn)好的動(dòng)畫方法rotate放到我們的軸心元素中，扇頁(yè)就可以動(dòng)起來(lái)啦。

-webkit-animation: rotate 4s linear infinite; 
6.完善效果并實(shí)現(xiàn)兼容性

至此我們的風(fēng)車已經(jīng)基本上完成啦，前面的代碼都是兼容webkit核心瀏覽器（chrome,safari）,接下來(lái)實(shí)現(xiàn)對(duì)其他瀏覽器的兼容，并且加上一個(gè)鼠標(biāo)懸浮加快轉(zhuǎn)動(dòng)的效果我們的風(fēng)車就算完成啦。

css3的表現(xiàn)在各個(gè)瀏覽器下的表現(xiàn)不盡相同，chrome瀏覽器下效果最佳，safari下風(fēng)車的柱子會(huì)有像素失真的問(wèn)題（同是webkit核心，不知道為什么表現(xiàn)那么不一樣），后續(xù)會(huì)嘗試解決這個(gè)問(wèn)題。

最新評(píng)論