css实现鼠标移上去元素旋转的效果

洪七公 · 发表于 2023-3-31 08:49:30

方法：1、用“@keyframes 动画名{100% {transform:rotate(角度)}”创建旋转动画；2、用“元素:hover{animation:动画名时间 linear infinite}”设置在鼠标移上元素时触发动画。

现在有些页面比如头像，下拉菜单的三角指示，需要鼠标移动上去后元素发生旋转效果，如下图：

css实现鼠标移上去旋转效果

旋转效果可以利用animation属性和“@keyframes”规则创建动画实现。

而鼠标移上元素，触发旋转动画需要使用:hover选择器。（:hover 选择器用于选择鼠标指针浮动在上面的元素，并设置样式。）

实现代码：

复制代码

注意：旋转角度可以修改，以上代码是360度

以上就是锦尚中国源码论坛关于css实现鼠标移上去元素旋转的效果详细介绍，更多源码、素材、图片、教程、资源请搜索锦尚中国获取！

感谢大家的支持与厚爱！

		自动登录	找回密码
密码			会员注册

[CSS/Html] css实现鼠标移上去元素旋转的效果