网页小图标img，如何鼠标放上去让其一直旋转

网页小图标img，如何鼠标放上去让其一直旋转，一般这样的需求都是导航，设计之类的网站，但是这个效果如何设置呢？其实这个并不是很难的问题，有的人说用JS，是可以的，但是最终实现的和CSS一样的，只是动态加载，还不如你直接在CSS样式里面加上hover，然后写CSS特效就好了，废话不多说，直接来代码

 

<div class='r_list'><a href='#' target='_blank'><img src='/uploads/image/20220901/20220901091727702770.png' alt='清华大学'><h3>清华大学</h3><p>清华大学的前身清华学堂始建于1911年，1912年更名为清华学校。1928年更...</p></a></div>

如上述代码，如何让img图标鼠标放上去旋转呢？您在控制其样式文件中这样做

.r_list a:hover img {animation: xycms_xz 1.7s linear infinite; -webkit-animation: xycms_xz 1.7s linear infinite;-moz-animation: xycms_xz 1.7s linear infinite;-o-animation: xycms_xz 1.7s linear infinite;-ms-animation: xycms_xz 1.7s linear infinite;}

有的人使用了却不旋转，那是因为您忽略了其中的xycms_xz，您的在控制样式上面加上一段代码：

@keyframes xycms_xz {0%{transform: rotate(0deg);-ms-transform: rotate(0deg); -moz-transform: rotate(0deg);-webkit-transform: rotate(0deg); -o-transform: rotate(0deg);}100%{transform: rotate(-360deg);-ms-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg);}}

这样就OK了，是不是很简单呢？