玩转CSS和原生JS：打造灵动跳跃的硬币效果

2023-09-07 07:14:31

跳跃的硬币，动感十足

网页动画已成为现代化网站中不可或缺的元素，它能提升用户体验，增强视觉吸引力。在这篇文章中，我们将使用CSS和原生JS，共同打造一个硬币跳动的效果。

CSS的魔力

CSS为我们提供了丰富的样式属性，让我们能够定义元素的视觉呈现效果。在硬币动画中，我们将利用transform属性，通过移动和旋转硬币元素，模拟跳跃的运动轨迹。此外，我们还可以使用animation属性，指定动画的持续时间、延迟、迭代次数和速度曲线。

JS的灵活性

原生JS提供了操控DOM元素的强大能力。我们将使用setInterval()函数，以指定的时间间隔触发硬币的跳跃动画。同时，Math.random()函数将赋予硬币随机的运动方向和旋转角度，让跳跃效果更加生动自然。

代码之旅

<div class="coin">
  <img src="coin.png" alt="Coin">
</div>

.coin {
  width: 50px;
  height: 50px;
  margin: auto;
}

.coin-animation {
  animation: coin-jump 1s infinite;
}

@keyframes coin-jump {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(0, -50px) rotate(360deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

const coin = document.querySelector('.coin');

setInterval(() => {
  const randomX = Math.random() * 100;
  const randomY = Math.random() * 100;
  const randomRotation = Math.random() * 360;

  coin.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${randomRotation}deg)`;
}, 100);