css3中怎么實現(xiàn)超炫風(fēng)車特效

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

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

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

我們可以看到風(fēng)車的柱子是一個等邊的梯形，通過width,height屬性配合border我們可以實現(xiàn)很多幾何圖形，如三角形，梯形等等，大家可以參照下面梯形的實現(xiàn)方法自己試試其他圖形的實現(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)車的軸

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

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

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

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

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

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

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

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

5.實現(xiàn)扇頁的動態(tài)效果

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

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

下面是動畫的實現(xiàn)

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

-webkit-animation: rotate 4s linear infinite; 

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

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(liá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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)