当前位置：首页 > CSS

css 制作彩虹

2026-04-01 11:57:40CSS

使用 CSS 线性渐变制作彩虹

通过 CSS 的 linear-gradient 属性可以轻松创建彩虹效果。彩虹通常由红、橙、黄、绿、蓝、靛、紫七种颜色组成。

.rainbow {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

使用 CSS 径向渐变制作圆形彩虹

如果需要圆形彩虹效果，可以使用 radial-gradient 属性：

.circular-rainbow {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

添加动画效果

让彩虹产生流动的动画效果：

.animated-rainbow {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  background-size: 200% auto;
  animation: rainbowFlow 2s linear infinite;
}

@keyframes rainbowFlow {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}

创建彩虹边框

制作彩虹边框效果：

.rainbow-border {
  width: 200px;
  height: 200px;
  border: 10px solid transparent;
  border-image: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  ) 1;
}

垂直彩虹条

如果需要垂直方向的彩虹：

css 制作彩虹

.vertical-rainbow {
  width: 30px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

这些方法可以根据实际需求进行调整，如改变颜色顺序、宽度或添加更多视觉效果。