使用css3實現小車行駛的動畫效果

王铁柱6發表於2024-12-10
CSSS3動畫
<!DOCTYPE html>
<html>
<head>
<title>Car Animation</title>
<style>
body {
  background-color: #f0f0f0;
}

.container {
  width: 800px;
  height: 200px;
  margin: 50px auto;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden; /* 隱藏溢位部分 */
}

.car {
  width: 100px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: -100px; /* 初始位置在容器外 */
  bottom: 20px;
  border-radius: 5px;
  animation: drive 5s linear infinite; /* 應用動畫 */
}

.wheel {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  bottom: 5px;
  animation: rotate 1s linear infinite; /* 車輪旋轉動畫 */
}

.wheel.front {
  left: 10px;
}

.wheel.back {
  right: 10px;
}


@keyframes drive {
  0% {
    left: -100px; /* 從左側進入 */
  }
  100% {
    left: 900px; /* 移動到右側，超出容器 */
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>

<div class="container">
  <div class="car">
    <div class="wheel front"></div>
    <div class="wheel back"></div>
  </div>
</div>

</body>
</html>

程式碼解釋:

  • HTML 結構: 建立一個 container 作為道路，car 作為小車，wheel 作為車輪。
  • CSS 樣式:
    • container: 設定寬度、高度、邊框，overflow: hidden; 隱藏超出容器的部分，使小車消失在右側。
    • car: 設定小車的樣式，left: -100px; 初始位置在容器左側外，animation: drive 5s linear infinite; 應用 drive 動畫，使其移動。
    • wheel: 設定車輪樣式，animation: rotate 1s linear infinite; 應用 rotate 動畫，使其旋轉。
  • @keyframes drive: 定義小車移動的動畫，從左側 -100px 移動到右側 900px，linear 表示勻速運動，infinite 表示無限迴圈。
  • @keyframes rotate: 定義車輪旋轉動畫，從 0deg 旋轉到 360deg，實現車輪轉動效果。

改進和擴充套件:

  • 更逼真的車身: 可以使用更復雜的 CSS 或圖片來建立更逼真的車身。
  • 背景移動: 可以讓背景也移動，模擬小車在行駛的效果。
  • 控制速度: 可以使用 JavaScript 來控制小車的速度和方向。
  • 新增其他元素: 可以新增道路、建築物、樹木等元素，使場景更豐富。

This example provides a basic car animation. You can modify and enhance it further to create more complex and realistic animations.

相關文章