当前位置：首页 > CSS

css 制作彩虹

2026-03-11 15:52:44CSS

使用CSS线性渐变制作彩虹

通过CSS的linear-gradient可以轻松创建彩虹效果。以下是一个水平彩虹条的示例代码：

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

垂直彩虹条的实现

将渐变方向改为垂直方向即可：

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

彩虹边框效果

使用伪元素和渐变可以创建彩虹边框：

.rainbow-border {
  position: relative;
  padding: 20px;
}
.rainbow-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    to right, 
    red, 
    orange, 
    yellow, 
    green, 
    blue, 
    indigo, 
    violet
  );
}

彩虹圆形效果

结合border-radius和radial-gradient可制作圆形彩虹：

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

动画彩虹效果

添加CSS动画让彩虹动起来：

css 制作彩虹

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

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

这些方法可以单独使用，也可以组合使用来创建更复杂的彩虹效果。通过调整颜色值、渐变方向和尺寸参数，可以实现各种不同的彩虹样式。