当前位置：首页 > CSS

css 制作彩虹

2026-01-28 08:59:32CSS

使用CSS线性渐变制作彩虹

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

.rainbow {
  width: 300px;
  height: 50px;
  background: linear-gradient(
    to right,
    red 0%,
    orange 16.6%,
    yellow 33.3%,
    green 50%,
    blue 66.6%,
    indigo 83.3%,
    violet 100%
  );
  border-radius: 5px;
}

创建彩虹边框效果

要实现彩虹边框效果，可以使用border-image属性配合渐变：

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

制作彩虹文字效果

为文本添加彩虹颜色可以通过背景裁剪技术实现：

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

制作圆形彩虹效果

使用radial-gradient可以创建圆形彩虹：

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

添加彩虹动画效果

通过CSS动画让彩虹颜色动起来：

.animated-rainbow {
  width: 300px;
  height: 50px;
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet,
    red
  );
  background-size: 400% 400%;
  animation: rainbow 5s linear infinite;
  border-radius: 5px;
}

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

这些方法可以根据需要调整颜色、尺寸和方向，创建各种不同的彩虹效果。通过组合这些技术，可以实现更复杂的彩虹样式设计。

css 制作彩虹