前面講過css3可以替代很多js實現的效果，其實很多時候純css3甚至可以替代圖片，直接用css3就可以畫出一些簡單的圖片。雖然css3畫出來的圖片效果可能不如直接用圖片的好，實現起來也比較複雜，最麻煩的是兼容性問題，不如圖片來得直接實用。但是換一種思路去思考問題的解決辦法往往能激發我們的靈感，也有助於我們學習css3。
下面給出的demo裏會有用圖片和純css3實現的風車效果的對比。
先看看靜態的效果圖：
純css3實現的風車動畫效果圖
下面簡單介紹一下我是如何用純css3實現一個風車的動畫效果的，
1.畫出風車的柱子
我們可以看到風車的柱子是一個等邊的梯形，通過width,height屬性配合border我們可以實現很多幾何圖形，如三角形，梯形等等，大家可以參照下面梯形的實現方法自己試試其他圖形的實現。
display: block;
height: 0;
width: 4px;
border-width: 0 4px80px4px;
border-style: nonesolidsolid;
border-color: transparenttransparentwhite;
效果圖
風車車柱實現效果
2.畫風車的軸
這一步比較簡單，用border-radius圓角屬性可以輕鬆實現。
width:4px;
height:4px;
border:3px#fffsolid;
background:#a5cad6;
border-radius:5px;
效果圖
風車軸心實現效果
3.畫風車的葉子
風車葉子的實現與柱子的實現原理相同，只不過是吧梯形倒過來了。
height: 0;
width: 2px;
border-width: 50px2px0px2px;
border-style: solidsolidnone;
border-color: whitetransparenttransparent ;
4.定位風車頁
這裏使用css3中transform的rotate（旋轉）來實現，有一點要注意的是，使用rotate時先要用origin定位旋轉的圓心，默認是元素的中心，這裏我們要定位在元素的頂部。
-webkit-transform-origin:0px0px;
-webkit-transform:rotate(60deg);
效果圖
風車扇頁實現效果
用上面的辦法依次畫出三個風車扇面，並且定位好角度。
5.實現扇頁的動態效果
靜態的風車畫好了，接下來我們要做的就是讓它動起來。
前面我們可以把扇頁定位在軸心元素的子元素，這樣我們只要實現軸心的轉動效果就可以讓扇頁也跟着動起來了。
下面是動畫的實現
@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
把實現好的動畫方法rotate放到我們的軸心元素中，扇頁就可以動起來啦。
-webkit-animation: rotate 4s linear infinite;
6.完善效果並實現兼容性
至此我們的風車已經基本上完成啦，前面的代碼都是兼容webkit核心瀏覽器（chrome,safari）,接下來實現對其他瀏覽器的兼容，並且加上一個鼠標懸浮加快轉動的效果我們的風車就算完成啦。
css3的表現在各個瀏覽器下的表現不盡相同，chrome瀏覽器下效果最佳，safari下風車的柱子會有像素失真的問題（同是webkit核心，不知道爲什麼表現那麼不一樣），後續會嘗試解決這個問題。
下面提供demo和下載地址
