用 HTML+CSS，画出可爱的毛毛虫！

2024-01-14 19:37:52

毛毛虫是一种常见的小动物，它是由一个个的圆从里到外组成。最里面的圆距离中心位置最近，最外层的圆距离中心位置最远。圆的旋转速度是一样的，只是开始旋转的时间（或者位置）不一样。

步骤一：创建 HTML 结构

首先，我们需要创建一个 HTML 文件并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div class="caterpillar">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</body>
</html>

这段代码创建了一个简单的 HTML 结构，其中包含一个 <div> 元素，类名为“caterpillar”。这个 <div> 元素将包含毛毛虫的身体。毛毛虫的身体由五个圆组成，每个圆都是一个 <div> 元素，类名为“circle”。

步骤二：添加 CSS 样式

接下来，我们需要添加 CSS 样式来为毛毛虫的身体和圆添加样式。在您的 HTML 文件中添加以下代码：

.caterpillar {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 0 auto;
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: green;
}

这段 CSS 代码为毛毛虫的身体和圆添加了样式。毛毛虫的身体是一个相对定位的元素，宽度为 200 像素，高度为 100 像素，并且在页面上居中。毛毛虫的圆是绝对定位的元素，宽度和高度都为 20 像素，并且都是圆形的。圆的背景颜色为绿色。

步骤三：添加 CSS 动画

最后，我们需要添加 CSS 动画来让毛毛虫动起来。在您的 HTML 文件中添加以下代码：

@keyframes caterpillar-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

.caterpillar {
  animation: caterpillar-move 5s infinite linear;
}