如何用css3实现简单旋转的风车

如何用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实现简单旋转的风车的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。