当光标悬停在图片上方时,可以使用CSS的:hover伪类来实现图片旋转效果。具体步骤如下:
<img src="image.jpg" class="rotate-image" alt="Image">
.rotate-image {
transition: transform 0.3s ease;
}
.rotate-image:hover {
transform: rotate(360deg);
}
在上述代码中,当光标悬停在.rotate-image类的元素上时,会将其旋转360度。transition属性指定了过渡效果的持续时间为0.3秒,过渡效果的速度为ease。
这样,当光标悬停在图片上方时,图片就会旋转起来。你可以根据需要调整旋转的角度和过渡效果的参数。
注意:以上代码只是实现图片旋转效果的一种方式,实际应用中可能需要根据具体情况进行调整。
领取专属 10元无门槛券
手把手带您无忧上云