前面講過css3可以替代很多js實現的效果，其實很多時候純css3甚至可以替代，直接用css3就可以畫出一些簡單的。雖然css3畫出來的效果可能不如直接用的好，實現起來也比較複雜，最麻煩的是相容性問題，不如來得直接實用。但是換一種思路去思考問題的解決辦法往往能激發我們的靈感，也有助於我們學習css3。
下面給出的demo裡會有用和純css3實現的風車效果的對比。
先看看靜態的效果圖：
純css3實現的風車動畫效果圖
下面簡單介紹一下我是如何用純css3實現乙個風車的動畫效果的，
1.畫出風車的柱子
我們可以看到風車的柱子是乙個等邊的梯形，通過width,height屬性配合border我們可以實現很多幾何圖形，如三角形，梯形等等，大家可以參照下面梯形的實現方法自己試試其他圖形的實現。
display: block;
height: 0;
width: 4px;
border-width: 0 4px 80px 4px;
border-style: none solid solid;
border-color: transparent transparent white;
效果圖風車車柱實現效果
2.畫風車的軸
這一步比較簡單，用border-radius圓角屬性可以輕鬆實現。
width:4px;
height:4px;
border:3px #fff solid;
background:#a5cad6;
border-radius:5px;
效果圖風車軸心實現效果
3.畫風車的葉子
風車葉子的實現與柱子的實現原理相同，只不過是吧梯形倒過來了。
height: 0;
width: 2px;
border-width: 50px 2px 0px 2px;
border-style: solid solid none;
border-color: white transparent transparent ;
4.定位風車頁
這裡使用css3中transform的rotate（旋轉）來實現，有一點要注意的是，使用rotate時先要用origin定位旋轉的圓心，預設是元素的中心，這裡我們要定位在元素的頂部。
-webkit-transform-origin:0px 0px;
-webkit-transform:rotate(60deg);
效果圖風車扇頁實現效果
用上面的辦法依次畫出三個風車扇面，並且定位好角度。
5.實現扇頁的動態效果
靜態的風車畫好了，接下來我們要做的就是讓它動起來。
前面我們可以把扇頁定位在軸心元素的子元素，這樣我們只要實現軸心的轉動效果就可以讓扇頁也跟著動起來了。
下面是動畫的實現
@-webkit-keyframes rotateto}
把實現好的動畫方法rotate放到我們的軸心元素中，扇頁就可以動起來啦。
-webkit-animation: rotate 4s linear infinite;
6.完善效果並實現相容性
至此我們的風車已經基本上完成啦，前面的**都是相容webkit核心瀏覽器（chrome,safari）,接下來實現對其他瀏覽器的相容，並且加上乙個滑鼠懸浮加快轉動的效果我們的風車就算完成啦。
css3的表現在各個瀏覽器下的表現不盡相同，chrome瀏覽器下效果最佳，safari下風車的柱子會有畫素失真的問題（同是webkit核心，不知道為什麼表現那麼不一樣），後續會嘗試解決這個問題。
(
用CSS3實現鐘錶效果
var olist document.getelementbyid list 獲取到刻度 var ocss document.getelementbyid css var ohour document.getelementbyid hour 獲取時針 var omin document.getele...
用CSS3實現放大效果
任務描述 本關任務 用css3放大效果。效果如下 相關知識 為了完成本關任務，你需要掌握 1.transform屬性，2.transition屬性。transform屬性 下面是基本的html結構，效果如下 現在需要基於中心放大1.2倍。效果如下 該如何實現呢？咱們先實現放大1.2倍，用到了 tra...
用CSS3偽類實現書籤效果
前兩天想給部落格上添個書籤效果，類似於下面這樣 在網上搜尋一番後，發現一篇純css書籤導航按鈕用三個div實現了這個效果。但是可沒有給我這麼多div，所以試著用偽類實現了一下。這兩個屬性就像正常元素的小左和小右。他們沒有元素標籤，但是卻有元素的css屬性，除此之外，他們還有乙個特殊的屬性叫 cont...