CSS如何让元素旋转起来并点击就停止
Admin 2022-05-27 群英技术资讯 864 次浏览
方法:1、利用animation属性给元素绑定循环旋转动画;2、利用@keyframes规则设置动画的旋转动作;3、用“元素:active{animation-play-state:paused}”语句设置元素循环旋转时,点击元素停止旋转。
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3怎样设置元素360度循环旋转时点击停止
在css中,可以利用animation属性给元素绑定循环旋转动画;然后再使用@keyframes规则设置动画的旋转动作。
我们播放动画时,如要暂停动画,就要用到animation-play-state这个属性。animation-play-state属性有两个值:paused: 暂停动画;running: 继续播放动画;
我们通过active选择器就可以设置了,示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite; } @keyframes fadenum{ 100%{transform:rotate(360deg);} } div:active{ animation-play-state:paused; } </style> </head> <body> <div></div> </body> </html>
输出结果:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本章给大家介绍html5中的Canvas 和 SVG分别是什么?它们的区别在何处?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本篇介绍的animation属性和传统的动画制作一样,能控制帧的每一步,制作出更强大的动画效果。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
这篇文章主要介绍css的inherit继承属性的内容,对大家学习和理解inherit继承属性有一定的帮助,感兴趣的朋友可以参考,希望大家阅读完这篇文章能有所收获,接下来小编带着大家一起了解看看。
用CSS怎样实现禁止内容复制,代码是什么。有不少朋友对此感兴趣,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008