Question

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

HTML code：

<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>

Answer 1

你不能旋转背景图像或子弹，但是伪元素，是的。想法是：

 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

Answer 2

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

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

这是一个链接，您可以轻松生成旋转的异形GIF：http://www.ajaxload.info/

希望这有帮助

Answer 3

我想你应该读这个，这样你才能得到你的答案......我正在寻找，我发现了这个......希望它会有所帮助... How to rotate li:before independently of the li?

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

3 个答案: