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

</head>

<body>

</div>

</body>

Report

声明

in to comment

Add emoji

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