文/亚当斯密
话不多说！如图：
风车转动应是十分流畅的，由于截图软件的限制帧数，所以没办法展示应有的流畅
工具：一个人物图片、一个风车透明图片（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
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦