当前位置：首页 > CSS

css制作彩虹

2026-03-31 22:19:44CSS

使用CSS线性渐变创建彩虹效果

通过CSS的linear-gradient属性可以轻松实现彩虹效果。以下代码展示了如何创建一个水平彩虹条：

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

垂直彩虹效果实现

将渐变方向改为垂直方向即可创建垂直彩虹：

.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%
  );
}

圆形彩虹效果

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

.circle-rainbow {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    red 0%,
    orange 15%,
    yellow 30%,
    green 45%,
    blue 60%,
    indigo 75%,
    violet 90%
  );
}

彩虹文字效果

为文字添加彩虹颜色渐变：

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

动画彩虹效果

添加CSS动画使彩虹产生流动效果：

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

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

彩虹边框效果

创建彩虹边框需要使用border-image属性：

css制作彩虹

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

这些CSS技术可以组合使用，根据具体需求调整颜色、方向和尺寸参数，创建各种彩虹视觉效果。