如何在无序列表中旋转用作列表类型的图像

Posted 2023-03-06

【中文标题】如何在无序列表中旋转用作列表类型的图像

【英文标题】：How to rotate image used as list type in unordered list

【发布时间】：2014-05-25 15:06:16

【问题描述】：

我可以使用下面的 CSS 旋转图像。

HTML 代码：

<div class="box-menu">
<img src="someurl" class="rotate-img">
</div>

CSS 代码：

.box-menu:hover >.binja-blade
-webkit-animation:2s linear 0s normal none infinite spin;
   -moz-animation:2s linear 0s normal none infinite spin;
    -ms-animation:2s linear 0s normal none infinite spin;
     -o-animation:2s linear 0s normal none infinite spin;
        animation:2s linear 0s normal none infinite spin;

但是，如果我在li 中使用该图像作为列表类型，那么当我们悬停特定的li 时，我如何旋转该图像？。

<ul class="box-menu" style="list-style-image:url('someURL');">
<li>Mumbai</li>
<li>Hyderabad</li>
<li>Pune</li>
</ul>

【参考方案1】：

我不知道这是否可能。您可以设置图像，但看不到如何将 css 添加到该图像。

您可以在悬停时通过 CSS 更改图像并使用动画而不是静态图像。

这里是您可以轻松生成旋转动画 gif 的链接：http://www.ajaxload.info/

希望对你有帮助

【讨论】：

问题是旋转 ajax 加载器图像永远不会停止。而且我只想在悬停时旋转，而且我有我的图像，所以这个链接对我没有帮助。但无论如何，谢谢。

然后，在鼠标移出时再次设置非旋转图像。 :)

【参考方案2】：

您不能旋转背景图像或项目符号，但伪元素，是的。 想法是：

 li 
list-style-type:none;
padding-left:20px;

li:before 
content:url(yourImage.png);
margin-left:-20px;
display:inline-block;

li:hover:before 
transform:rotate(360000deg);
transition:300s;/* tune this */

DEMO

【讨论】：

你可以省下一个动画规则:)

【参考方案3】：

我认为你应该阅读这篇文章，这样你才能得到你的答案..我正在搜索，我找到了这个..希望它会有所帮助.. How to rotate li:before independently of the li?