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

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

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

我們可以看到風(fēng)車的柱子是一個(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.畫風(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; 

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

網(wǎng)站題目：css3中怎么實(shí)現(xiàn)超炫風(fēng)車特效
URL標(biāo)題：http://www.rwnh.cn/article6/jsdiig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)