会转动的小丸子(css3)
上海/UI设计师/11年前/337浏览
版权
会转动的小丸子(css3)
运用css3中的动画标签实现鼠标移上去图片出现转动,鼠标离开也实现转动的效果,这里演示图片和代码实现的动画差不多,希望能帮助一些CSS3爱好者。

样式代码是:
.bg{background-image:url(../images/wanzi.png);
height:400px;
width:400px;
border-radius:200px;
margin:20px auto;
transition:all .2s ease;
}
.bg:hover{
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
transition-duration:.2s;
transition-timing-function:ease-in-out;
}
<head>
<link href="css/returnpic.css" rel="stylesheet"/>
</head>
<body>
<!--图片旋转-->
<div class="bg" id="one" >
</div>
</body>
4
Report
声明
1
Share
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
You may like
Log in
4Log in and synchronize recommended records
1Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share








































