新设计人网[www.sjidea.com],努力打造为新设计服务综合资讯第一网!
全新域名:[www.sjidea.com]

新设计人资源网

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

www.sjidea.com | CSS教程 | 2022-05-22

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

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

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

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

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

实现代码:



	
		
	
	
		

1.gif



感谢您的阅读标题为 《css怎么实现鼠标移上去旋转效果》的文章,更多教程内容可关注新设计人网。