【干货！】如何利用CSS3新属性创建一个风车动画

文/亚当斯密
话不多说！如图：

风车转动应是十分流畅的，由于截图软件的限制帧数，所以没办法展示应有的流畅

工具：一个人物图片、一个风车透明图片（ps扣出来放到一个透明背景，以png格式保存下来即可，当然！为了方面学习，下面我会把做好的图片分享出来）

下面是具体的过程：
样式：

*{
margin:0;
padding:0;
}
img{
width: 100px;
height: 100px;
margin:200px;
z-index:999;
}
img:hover{
transition:transform 30s;
transform:rotate(20000deg);
}
.humen{
width:186px;
height:388px;
background: url(reneu.png);
position: relative;
left:72px;
top:-244px;
}</style>

结构十分的简单：

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ting.png"><div class="humen"></div>

以上用到的图片资源  密码是：ljrw
把代码粘贴到基本结构对应的位置即可，运行后需要鼠标放到风车上即可实现慢速开始越来越快的风车转动效果。OK！赶紧试试吧！有问题留言！

作者：亚当斯密
链接：https://www.jianshu.com/p/589c83f61d6d