css3實(shí)現(xiàn)超炫風(fēng)車特效

發(fā)布時(shí)間：2014-11-12 09:25:34 作者：佚名

本文記錄了如何一步步用純CSS3來實(shí)現(xiàn)風(fēng)車效果，雖然css3畫出來的圖片效果可能不如直接用圖片的好，實(shí)現(xiàn)起來也比較復(fù)雜，最麻煩的是兼容性問題，不如圖片來得直接實(shí)用。但是換一種思路去思考問題的解決辦法往往能激發(fā)我們的靈感，也有助于我們學(xué)習(xí)css3。

前面講過css3可以替代很多js實(shí)現(xiàn)的效果，其實(shí)很多時(shí)候純css3甚至可以替代圖片，直接用css3就可以畫出一些簡(jiǎn)單的圖片。雖然css3畫出來的圖片效果可能不如直接用圖片的好，實(shí)現(xiàn)起來也比較復(fù)雜，最麻煩的是兼容性問題，不如圖片來得直接實(shí)用。但是換一種思路去思考問題的解決辦法往往能激發(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è)等邊的梯形，通過width,height屬性配合border我們可以實(shí)現(xiàn)很多幾何圖形，如三角形，梯形等等，大家可以參照下面梯形的實(shí)現(xiàn)方法自己試試其他圖形的實(shí)現(xiàn)。

復(fù)制代碼

代碼如下:

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)原理相同，只不過是吧梯形倒過來了。

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)）來實(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)車畫好了，接下來我們要做的就是讓它動(dòng)起來。

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

下面是動(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)起來啦。

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

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

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