CSS绘制旗帜：一学就会的网页设计入门练习

2023-04-25 17:45:58

用 DIV+CSS 轻松制作飘扬的旗帜

在网页设计领域，DIV+CSS 是一种既灵活又强大的技术，可以创造出令人惊叹的视觉元素。如果你是一位新手，想提升你的技能，绘制旗帜是一个绝佳的练习方式。

步骤 1：绘制背景

首先，创建一个 HTML 文件，在<head>标签中添加<meta charset="UTF-8">，然后在<body>标签中添加一个<div>标签来容纳旗帜。接下来，为<div>添加一个<style>标签，并添加以下 CSS 代码：

div {
  width: 200px;
  height: 100px;
  background-color: #000;
}

这会创建一个黑色的矩形作为旗帜的背景。

步骤 2：添加条纹

接下来，在<div>标签内添加两个<div>标签来容纳旗帜的条纹。同样，为每个条纹添加一个<style>标签，并分别添加以下 CSS 代码：

div div:first-child {
  width: 100px;
  height: 50px;
  background-color: #fff;
}

div div:last-child {
  width: 100px;
  height: 50px;
  background-color: #ff0000;
}

现在，你会看到一个白条纹和一个红条纹。

步骤 3：调整样式

为了让旗帜看起来更真实，我们需要进行一些调整。首先，添加以下 CSS 代码让旗帜居中：

div {
  margin: 0 auto;
}

然后，添加以下代码来创建阴影效果：

div {
  box-shadow: 0 0 5px #000;
}

步骤 4：飘动效果

最后，让我们让旗帜动起来。在<div>标签的<style>标签中添加以下代码：

div {
  animation: flag-wave 5s infinite;
}

并在 CSS 文件中添加以下关键帧：

@keyframes flag-wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

这会让旗帜左右飘动，营造出飘扬在风中的效果。

代码示例

以下是完整的 HTML 和 CSS 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: #000;
      margin: 0 auto;
      box-shadow: 0 0 5px #000;
      animation: flag-wave 5s infinite;
    }

    div div:first-child {
      width: 100px;
      height: 50px;
      background-color: #fff;
    }

    div div:last-child {
      width: 100px;
      height: 50px;
      background-color: #ff0000;
    }

    @keyframes flag-wave {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(10px);
      }
      100% {
        transform: translateX(0);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>