利用CSS3实现头像旋转效果实例代码

来源：懂视网责编：小OO 时间：2020-11-27 18:52:32

利用CSS3实现头像旋转效果实例代码

鼠标未放上效果。鼠标放上之后旋转效果。transition： all 2.0s；表示所有的属性变换在2秒内完成。transform： rotate(360deg)；表示图片旋转360度。

推荐度：

点击下载本文 文档为doc格式

导读鼠标未放上效果。鼠标放上之后旋转效果。transition： all 2.0s；表示所有的属性变换在2秒内完成。transform： rotate(360deg)；表示图片旋转360度。

本篇文章主要介绍了CSS3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

鼠标未放上效果：

利用CSS3实现头像旋转效果实例代码

鼠标放上之后旋转效果：

利用CSS3实现头像旋转效果实例代码

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

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 img{
 border: #000 solid 2px;
 display: block;
 margin: 50px auto;
 border-radius: 50%;
 transition: all 2.0s;
 }
 img:hover{
 transform: rotate(360deg);
 }
 </style>
 </head>
 <body>
 <img src="img/03.jpg" />
 </body>
</html>

利用CSS3实现头像旋转效果实例代码

鼠标未放上效果。鼠标放上之后旋转效果。transition： all 2.0s；表示所有的属性变换在2秒内完成。transform： rotate(360deg)；表示图片旋转360度。

推荐度：

点击下载本文 文档为doc格式

标签：头像利用旋转

热门焦点

利用CSS3实现头像旋转效果实例代码

利用CSS3实现头像旋转效果实例代码

利用CSS3实现头像旋转效果实例代码

最新推荐

猜你喜欢

热门推荐