html头像动画,用CSS3实现头像旋转效动画

这次给大家带来用CSS3实现头像旋转效动画，用CSS3实现头像旋转效动画的注意事项有哪些，下面就是实战案例，一起来看一下。

鼠标未放上效果：

鼠标放上之后旋转效果：

transition: all 2.0s;表示所有的属性变换在2秒内完成；

transform: rotate(360deg);表示图片旋转360度。

img{

border: #000 solid 2px;

display: block;

margin: 50px auto;

border-radius: 50%;

transition: all 2.0s;

}

img:hover{

transform: rotate(360deg);

}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Bootstrap实现价格表

css做出波纹动画

CSS怎么处理浏览器的默认样式