App*_*rew 5 css css-transforms
请查看演示 - http://jsfiddle.net/cYGzC/
我们的想法是,在悬停时,十字架('×')将围绕其中心转动,这将在悬停时产生良好的旋转运动.问题是,为了正常工作,×的中心和圆的中心必须重合.
.close_button {
background-color: #3b3b3b;
width: 40px;
height: 40px;
border-radius: 20px;
box-shadow: 0 0 5px rgba(150,150,150,0.9);
color: #fff;
font-size: 40px;
line-height: 40px;
text-align: center;
transition-duration: 2s;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)
除了Windows中的Chrome之外,上述CSS技巧似乎在许多浏览器中都能完成.(Mac Chrome似乎工作正常.)