继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

aluckdog
关注TA
已关注
手记 493
粉丝 68
获赞 394

文/亚当斯密
话不多说!如图:

webp

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

工具:一个人物图片、一个风车透明图片(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 src="ting.png"><div class="humen"></div>

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



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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP