Question

我正在尝试使图像掉落，类似于下雨效果，但我只希望它由事件侦听器触发。

当前，我要添加一个div并为下降效果设置动画效果，但是每个其他事件触发器都将添加到第一个下方/旁边。

function appendImage() {
  var img = document.createElement('img');
  img.setAttribute('src', 'http://pixelartmaker.com/art/3ba7f5717ac3c63.png');
  $('#action').append(img);
}

@keyframes slidedown {
  0% {
    margin-top: 0%;
  }
  100% {
    margin-top: 150%;
  }
}

img {
  animation-duration: 20s;
  animation-name: slidedown;
  height: 100px;
  width: 100px;
}

<input type="button" value="Test Button" onclick="appendImage();" />
<div id="action"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

我试图使图像从x轴上的随机位置产生，但始终从屏幕顶部产生。

codepen在这里。

Answer 1

您可以在此处使用固定位置，以便元素可以在视口中独立移动-现在您可以为动画使用 top 值，并为 left < / em>将其水平随机散布。

还请注意animation-fill-mode: forwards的用法，该用法可确保在动画之后图像不会返回到窗口顶部。

请参见下面的演示和updated codepen here：

var rainDiv = document.querySelector('#action'); function appendImage() { var img = document.createElement('img'); img.setAttribute('src', 'http://pixelartmaker.com/art/3ba7f5717ac3c63.png'); img.style.left = Math.floor(Math.random() * 100) + 'vw'; rainDiv.appendChild(img); }

img { position: fixed; animation-duration: 20s; animation-name: slidedown; animation-fill-mode: forwards; height: 100px; width: 100px; top: 0; } @keyframes slidedown { to { top: 120%; } }

<input type="button" value="Test Button" onclick="appendImage();" /> <div id="action"></div>

如何创建由事件触发的降雨效果？

1 个答案: