如何用css3實現簡單旋轉的風車
在DW中想要實現旋轉的風車就要使用關鍵幀keyframes來設置旋轉，其實也沒什么難度的。先設置它的樣式，然后要用定位把它放到合適的位置就可以了。
HTML的代碼如下：

<div class="fengche"><div class="zhu"></div><div class="zhuan"><div class="z"></div><div class="xiaoyan"></div><div class="z1"></div><div class="z2"></div><div class="z3"></div><div class="z4"></div></div></div>

名字你們不要學我這樣給啊，命名一定要標準，我這個是剛學的時候打的，只是懶得改了。
Css的代碼如下：

.fengche{position: relative; } .zhuan{width: 300px;height: 300px;position: relative;clear: both;animation: zhuan 6s linear infinite; } @keyframes zhuan{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);} } .z{width: 50px;height: 50px;margin: 0px;background: #B5B5B5;border-radius: 50%;position: absolute;top: 126px;left: 125px; } .xiaoyan{width: 20px;height: 20px;margin: 0px;background:#C8C8C8;border-radius: 50%;position: absolute;top: 140px;left: 140px; } .z1,.z3{width: 40px;height: 135px;background: #EBF453;border-radius: 50%; }.z1{position: absolute;top: -35px;left: 110px; } .z3{position: absolute;bottom: -35px;left: 110px; } .z2,.z4{width: 135px;height: 40px;background: #EBF453;border-radius: 50%; } .z2{position: absolute;top: 115px;left: 160px; } .z4{position: absolute;top: 115px;right: 160px; } .zhu{width: 30px;height: 300px;background: #82BDD5;position: absolute;top: 81.5%;left: 135px;border-radius: 35% 35% 0 0; }

代碼就這么多，下面讓我們看下實現的效果圖：


不要問我為啥那么丑，我的技術還不夠，你們要是有什么更好的方法一定要跟我說一下，大家一起進步嘛，畢竟，我也是初學者，所以歡迎大家來評論（づ￣3￣）づ╭?～

總結

以上是生活随笔為你收集整理的如何用css3实现简单旋转的风车的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。