css定义动画悬停旋转 |css画金币

.hover-effect{
transition: transform .2s ease-in-out;
}
.hover-effect:hover{
transform: rotate(360deg);
}

首先，在CSS中定义悬停效果，需要使用transition属性。该属性可以控制元素进行转换时的效果，包括动画的持续时间、速度和转换函数等。具体实现方式为：将鼠标悬停在元素上时，添加:hover伪类，然后在:hover下定义transform的值，该值有多种属性可选择，如rotate、scale、skew等，这里大家选取rotate。

上面这段代码，定义了一个类名为.hover-effect的元素。在该元素上，大家设置了transition属性，其中transform为需要进行转换的属性，在此例中，大家使用rotate。控制转换的速度方式是通过ease-in-out控制加速度。接下来，当鼠标悬停在.hover-effect上时，大家给它添加:hover伪类，然后定义一个transform的值，来控制元素悬停时的效果，这里选用rotate属性，并且将元素旋转360度。

最后，大家需要在HTML标签上添加类名.hover-effect，这样大家就能成功实现CSS悬停旋转的效果。