.sun-line { width: 5px; height: 200px; background-color: yellow; margin: 15px; transform: rotate(15deg); animation: shot 3s linear infinite paused; } <div class="sun-light" id="sun-light"> <div class="sun-line line-1"></div> <div class="sun-line line-2"></div> <div class="sun-line line-3"></div> <div class="sun-line line-4"></div> <div class="sun-line line-5"></div> <div class="sun-line line-6"></div> <div class="sun-line line-7"></div> <div class="sun-line line-8"></div> <div class="sun-line line-9"></div> </div> <input type="button" name="start" id="btn" value="开始" />window.onload = function() { var oBtn = document.getElementById("btn"); var isPaused = false; // 记录动画状态 oBtn.onclick = function() { var oSunline = document.getElementsByClassName("sun-line"); for (let i = 0; i < oSunline.length; i++) { if (oSunline[i].style.animationPlayState === 'paused') { oSunline[i].style.animationPlayState = 'running'; } else if (oSunline[i].style.animationPlayState = 'running') { oSunline[i].style.animationPlayState = 'paused'; } } } } 如何使我每点击一次按钮，动画就自动播放一次

你可以使用 JavaScript 来实现这一功能。在每次点击按钮时，获取所有的 sun-line 元素，然后将它们的 animation-play-state 属性设置为 running，这将使动画播放一次。代码示例如下：

window.onload = function() {
  var oBtn = document.getElementById("btn");
  oBtn.onclick = function() {
    var oSunline = document.getElementsByClassName("sun-line");
    for (let i = 0; i < oSunline.length; i++) {
      oSunline[i].style.animationPlayState = 'running';
    }
  }
}

这样，每次点击按钮，所有的 sun-line 动画都会播放一次。如果需要在动画播放完毕后再次点击才能重播动画，可以监听动画结束事件，在动画结束后将 animation-play-state 属性设置为 paused。

相关问题

.sun-light { position: absolute; top: 230px; left: 220px; display: flex; width: 200px; height: 200px; background-color: pink; } .sun-line { height: 100px;//光线长度 width: 10px;//光线宽度 background-color: yellow; }为什么sun-line没有显示

根据你提供的代码，.sun-line 是一个没有内容的 div，所以默认情况下它是没有高度的。要让它显示出来，你需要为其添加内容或者设置其高度。可以尝试给 .sun-line 添加以下样式：

.sun-line {
  height: 100px;
  width: 10px;
  background-color: yellow;
  display: block;
}

另外，你需要确保 .sun-line 元素被正确地放置在 .sun-light 元素内部，并且 .sun-light 元素的位置和尺寸是正确的。

@keyframes shot { 0% { transform: rotate(215deg) translate(0, 0); } 100% { transform: rotate(215deg) translate(20px, -300px); } }.sun-light { position: absolute; top: 90px; left: 330px; display: flex; width: 200px; height: 200px; background-color: pink; border-radius: 50%; transform: rotate(215deg); overflow: hidden; animation: shot 2s 5; } 如何让我的动画元素执行完动画后不返回原来位置

您可以在动画结束后添加`animation-fill-mode: forwards;`属性，这将使动画元素在动画结束后保持在最后一个关键帧的状态，而不是返回原来的位置。例如：

.sun-light {
  position: absolute;
  top: 90px;
  left: 330px;
  display: flex;
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50%;
  transform: rotate(215deg);
  overflow: hidden;
  animation: shot 2s 5;
  animation-fill-mode: forwards;
}

这样，在动画完成后，`.sun-light`元素将保持在最后一个关键帧的位置，而不会返回原来的位置。