脚本宝典收集整理的这篇文章主要介绍了css怎么实现鼠标移上去旋转效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
方法:1、用“@keyframes 动画名{100% {transform:rotate(角度)}”创建旋转动画;2、用“元素:hover{animation:动画名 时间 linear infinITe}”设置在鼠标移上元素时触发动画。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css实现鼠标移上去旋转效果
旋转效果可以利用animation属性和“@keyframes”规则创建动画实现。
而鼠标移上元素,触发旋转动画需要使用:hover
选择器。(:hover 选择器用于选择鼠标指针浮动在上面的元素,并设置样式。)
实现代码:
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; margin: 50px auto; } div:hover { animation: mymove 1s linear infinite; } @keyframes mymove { 100% { transform: rotate(360deg); } } @-webkit-keyframes mymove {/* Safari and Chrome */ 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"></div> </body> </html>
(学习视频分享:css视频教程)
以上就是css怎么实现鼠标移上去旋转效果的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的css怎么实现鼠标移上去旋转效果全部内容,希望文章能够帮你解决css怎么实现鼠标移上去旋转效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。