当前位置：首页 > CSS

css制作彩虹

2026-02-26 23:07:03CSS

使用CSS线性渐变制作彩虹

彩虹效果可以通过CSS的线性渐变（linear-gradient）实现，结合不同颜色的渐变角度和位置。

.rainbow {
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to right,
    red 0%,
    orange 15%,
    yellow 30%,
    green 45%,
    blue 60%,
    indigo 75%,
    violet 90%
  );
  border-radius: 10px;
}

彩虹动画效果

通过CSS动画让彩虹颜色动态变化，增加视觉吸引力。

.rainbow-animated {
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to right,
    red, orange, yellow, green, blue, indigo, violet
  );
  background-size: 400% 100%;
  animation: rainbow-animation 3s linear infinite;
  border-radius: 10px;
}

@keyframes rainbow-animation {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

彩虹文字效果

为文字添加彩虹颜色渐变，通过背景裁剪实现。

.rainbow-text {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(
    to right,
    red, orange, yellow, green, blue, indigo, violet
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

彩虹边框效果

使用多重背景和边框半径创建彩虹边框。

.rainbow-border {
  width: 200px;
  height: 200px;
  border: 5px solid transparent;
  border-radius: 50%;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(
      to right,
      red, orange, yellow, green, blue, indigo, violet
    ) border-box;
}

垂直彩虹条

调整渐变方向为垂直，创建竖状彩虹条。

css制作彩虹

.vertical-rainbow {
  width: 20px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    red 0%,
    orange 15%,
    yellow 30%,
    green 45%,
    blue 60%,
    indigo 75%,
    violet 90%
  );
  border-radius: 10px;
}

以上方法可根据实际需求调整颜色、尺寸和方向。通过组合不同的CSS属性，可以创建各种形式的彩虹效果。