如何解决如果要重复播放,是否可以通过单击来执行此动画?
url_patterns
如何仅单击一次即可达到这种效果?
解决方法
我不明白我的意思。
只需单击一次即可重复相同的动画,那么mudaCor类中的以下样式就足够了。
animation-iteration-count:infinite/*or a numbre*/;
css文件如下
*{
margin:0;
padding:0;
box-sizing:border-box;
}
@keyframes mudaCor{
0%{
background:orange;
}
50%{
background:blue;
}
100%{
background:orange;
}
animation-iteration-count:infinite;
}
.btt{
margin:10px;
padding:10px;
background:orange;
}
.mudaCor{
animation:mudaCor 2s linear;
animation-iteration-count:infinite/*or a numbre*/;
}
希望这可以为您提供帮助
,您可以使用requestAnimationFrame
来创建这种行为。您要做的就是单击按钮,删除课程,然后重新添加课程以重新启动动画。
var btt = document.querySelector('.btt');
btt.addEventListener('click',function() {
this.classList.remove('mudaCor');
requestAnimationFrame(() => {
this.classList.add('mudaCor');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@keyframes mudaCor {
0% {
background: orange;
}
50% {
background: blue;
}
100% {
background: orange;
}
}
.btt {
margin: 10px;
padding: 10px;
background: orange;
}
.mudaCor {
animation: mudaCor 2s linear;
}
<button class="btt">CLIQUE1</button>
,
尝试使用setInterval
循环运行点击代码。
var btt = document.querySelectorAll('.btt')[0];
btt.addEventListener('click',function() {
let elem = this;
setInterval(function() {
elem.classList.toggle('mudaCor')
},1500)
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@keyframes mudaCor {
0% {
background: orange;
}
50% {
background: blue;
}
100% {
background: orange;
}
}
.btt {
margin: 10px;
padding: 10px;
background: orange;
}
.mudaCor {
animation: mudaCor 2s linear;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=">
</head>
<body>
<div class="container">
<button class="btt">CLIQUE1</button>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。