這篇文章將為大家詳細(xì)講解有關(guān)css3中怎么實(shí)現(xiàn)超炫風(fēng)車(chē)特效，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

東勝ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！

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

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

代碼如下:

display: block;  
height: 0;  
width: 4px;  
border-width: 0 4px 80px 4px;  
border-style: none solid solid;  
border-color: transparent transparent white;  

效果圖

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

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

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

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

風(fēng)車(chē)葉子的實(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)車(chē)頁(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); 
效果圖

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

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

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

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

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

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

-webkit-animation: rotate 4s linear infinite; 

關(guān)于css3中怎么實(shí)現(xiàn)超炫風(fēng)車(chē)特效就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。