使用 HTML 和 CSS 设计一个正在运行的汽车动画(1)

📌 相关文章

📜 使用 HTML 和 CSS 设计一个正在运行的汽车动画(1)

📅 最后修改于: 2023-12-03 15:36:28.615000 🧑 作者: Mango

使用 HTML 和 CSS 设计一个正在运行的汽车动画

这个动画将展示一辆汽车在道路上行驶的效果。我们将使用 HTML 和 CSS 来创建这个动画。

首先，我们需要创建一个 HTML 文件，可以使用以下代码来创建一个基本的 HTML 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Car Animation</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="car">
        <!-- Car elements go here -->
      </div>
    </div>
  </body>
</html>

在这个基本的 HTML 文件中，我们需要添加一个 CSS 文件链接，并在 body 元素中添加一个 div 容器元素，其中包含一个 div 元素，用于表示汽车。

现在，我们需要添加一些 CSS 代码来优化汽车的样式，并创建动画效果。我们使用以下 CSS 代码：

.container {
  width: 100%;  /* Make the container full-width */
  height: 300px;  /* Set a height for the container */
  background-color: #aaa;  /* Set a background color for the container */
}

.car {
  width: 100px;  /* Set a width for the car */
  height: 50px;  /* Set a height for the car */
  background-color: #fff;  /* Set a background color for the car */
  border: 2px solid #333;  /* Add a border to the car */
  border-radius: 10px;  /* Round the corners of the car */
  position: relative;  /* Set the car's position to relative */
  left: -100px;  /* Move the car out of view to the left */
  animation: drive 5s linear infinite;  /* Create an infinite animation called 'drive' */
}

@keyframes drive {
  0% {
    left: -100px;  /* Move the car out of view to the left */
  }
  100% {
    left: calc(100% + 100px);  /* Move the car out of view to the right */
  }
}

在这个 CSS 代码中，我们首先设置了容器和汽车的样式。然后，我们为汽车创建一个名为 drive 的动画效果。

这个动画效果将汽车从左到右沿着道路行驶。我们使用 left 属性来移动汽车的位置。第一个关键帧将汽车移动到容器的最左侧，第二个关键帧将汽车移动到容器的最右侧。我们使用 calc() 函数来计算汽车应该移动到的位置，因为它需要移动到容器的正确端点。

现在，我们需要运行这个动画。可以通过打开 HTML 文件并在浏览器中运行它来实现。我们会看到一辆汽车在道路上行驶的动画效果。

这就是使用 HTML 和 CSS 创建正在运行的汽车动画的完整过程。