当先锋百科网

首页 1 2 3 4 5 6 7

CSS图标设置旋转效果

.icon {
display: inline-block;
transform: rotate(0deg);
transition: transform 0.5s ease-in-out;
}
.icon:hover {
transform: rotate(45deg);
}

上面的代码可以在CSS中将一个图标旋转45度。首先,我们使用transform属性来将图标旋转到0度。然后,我们使用transition属性来指定过渡效果,以便在鼠标悬停时改变图标的旋转程度。最后,我们使用CSS伪类:hover来触发旋转效果。

这些代码可以应用于任何需要旋转图标的情况。只需将.icon替换为相应的类或选择器即可。