css 制作 旗帜

使用 CSS 制作旗帜

通过 CSS 可以创建各种风格的旗帜，以下是一些常见旗帜的实现方法：

水平条纹旗帜

通过线性渐变或重复背景实现水平条纹：

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    #FF0000 33%,
    #FFFFFF 33% 66%,
    #0000FF 66%
  );
}

垂直条纹旗帜

使用方向为向右的线性渐变：

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    to right,
    #FF0000 33%,
    #FFFFFF 33% 66%,
    #0000FF 66%
  );
}

对角条纹旗帜

调整渐变角度创建对角效果：

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    45deg,
    #FF0000 50%,
    #FFFFFF 50%
  );
  background-size: 30px 30px;
}

带图案的旗帜

使用伪元素添加图案：

.flag {
  width: 300px;
  height: 200px;
  background: #FF0000;
  position: relative;
}

.flag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: #FFFFFF;
  border-radius: 50%;
}

动画旗帜效果

添加动画使旗帜飘动：

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    to right,
    #FF0000 50%,
    #FFFFFF 50%
  );
  animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% {
    transform: skewY(0deg);
  }
  50% {
    transform: skewY(5deg);
  }
}

响应式旗帜设计

使用视窗单位确保旗帜比例：

.flag {
  width: 50vw;
  height: calc(50vw * 2/3);
  background: linear-gradient(
    to bottom,
    #FF0000 50%,
    #FFFFFF 50%
  );
}

这些方法可以组合使用来创建更复杂的旗帜设计。通过调整颜色、比例和图案，可以模拟世界各国国旗或创建自定义旗帜。