CSS 让滑板动起来！点燃你的前端创意

2023-10-24 17:36:14

CSS动画的魅力

CSS动画是一种让你的网页元素动起来的神奇工具。它可以让你创建各种各样的动画效果，从简单的淡入淡出到复杂的旋转和位移。动画可以为你的网页增添趣味性和互动性，让用户在浏览你的网站时获得更丰富的体验。

滑板动画实战

今天，我们就来使用CSS动画创建一个滑板动画。我们将从创建一个简单的HTML滑板开始，然后使用CSS来为它添加动画效果。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="skateboard">
    <img src="skateboard.png" alt="滑板">
  </div>

  <script src="script.js"></script>
</body>
</html>

在style.css中，我们将为滑板添加动画效果：

.skateboard {
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: skateboard-move 3s infinite alternate;
}

@keyframes skateboard-move {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

在script.js中，我们将使用JavaScript来控制滑板的移动：

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

document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      skateboard.style.top = `${parseInt(skateboard.style.top) - 10}px`;
      break;
    case 'ArrowDown':
      skateboard.style.top = `${parseInt(skateboard.style.top) + 10}px`;
      break;
    case 'ArrowLeft':
      skateboard.style.left = `${parseInt(skateboard.style.left) - 10}px`;
      break;
    case 'ArrowRight':
      skateboard.style.left = `${parseInt(skateboard.style.left) + 10}px`;
      break;
  }
});