我正在使用 css 动画制作动画背景。我可以在单击按钮时将其关闭，但是它不适用于第二次单击。我知道这是可能的，因为我在控制台中输入了该函数并且它起作用了。我也已经尝试过 switch 语句和条件语句。我不想重新加载页面，而是使用相同的按钮再次制作动作。<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>a</title> <style>body { font-family: verdana, arial, sans-serif; font-size: 14px; margin: 0; width: 100%; height: 100vh; text-align: center; background: linear-gradient(to left, #24292C, grey, #99958B, #C2BDB3, #EAE7E1, #EAE7E1, #C2BDB3, #99958B, grey, #24292C); background-size: 200% 100%; animation: gradientBG 10s ease infinite;}@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }} </style> <div id="header"> <button alt="Stop Background Motion" id ="stopMotionIcon"onclick="gradientMotion()"> <h1>a</h1> <script> function gradientMotion(){ if(document.querySelector("body").style.backgroundSize = "200% 100%"){ document.querySelector("body").style.backgroundSize = "100% 100%" } else if (document.querySelector("body").style.backgroundSize = "100% 100%"){ document.querySelector("body").style.backgroundSize = "200% 100%" }}</script><body></body>
1 回答
jeck猫
TA贡献1909条经验 获得超7个赞
真的吗 ？如果/否则如果！简单点...
const BgSize = [ '200% 100%', '100% 100%']
var indx = 0
document.getElementById('stopMotionIcon').onclick =_=>
{
indx = ++indx %2
document.body.style.backgroundSize = BgSize[indx]
}
body {
font-family: verdana, arial, sans-serif;
font-size: 14px;
margin: 0;
width: 100%;
height: 100vh;
text-align: center;
background: linear-gradient(to left, #24292C, grey, #99958B, #C2BDB3, #EAE7E1, #EAE7E1, #C2BDB3, #99958B, grey, #24292C);
background-size: 200% 100%;
animation: gradientBG 10s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
<header>
<button id="stopMotionIcon" >Stop Background Motion</button>
<h1>a</h1>
</header>
添加回答
举报
0/150
提交
取消