本文将为大家详细介绍“css如何实现鼠标移上去旋转效果”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“css如何实现鼠标移上去旋转效果”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

成都创新互联公司网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、响应式网站设计、行业门户型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，成都创新互联公司网站制作为客户规划、按需求定制开发符合企业需求、带有营销价值的网络建站方案认真对待每一个客户，我们不用口头的语言来吹擂我们的优秀，成百上千家的成功案例见证着我们的成长。

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

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

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

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

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

实现代码：