会转动的小丸子（css3）

上海/UI设计师/11年前/342浏览

版权

会转动的小丸子（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

举报

|

声明

1

分享

原创文章网页

评论

评论你的想法~

表情

喜欢TA的作品吗？喜欢就快来夸夸TA吧！

大家都在看

登录注册

4

1

评论

分享