CSS，小图标旋转

html-css023

CSS，小图标旋转,第1张

www.web-tinker.com/article/20003.html

你看这篇文章就会明白为什么不是中心转动。。

还有，下面这个网站，有一种比较直观的做法：

www.dasselundwagner.com/en/

<img src="图标.jpg" class='xuanzhuan' />

.xuanzhuan{animation:xz 1s linear infinite }

@keyframes xz{

from  {transform:rotate(0deg)}

to{transform:rotate(360deg)}

}infinite 旋转不限次数，也可以改成1，旋转一次

transition使用

为鼠标指针的滑过状态设置一些动画效果。图标在1秒内匀速旋转360度。

.close:hover::before{

-webkit-transform:rotate(360deg)

transform:rotate(360deg)

-webkit-transition:-webkit-transform 1s linear

transition:transform 1s linear

}