当前位置：首页 > CSS

css制作彩虹

2026-02-12 14:23:50CSS

使用CSS线性渐变制作彩虹

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

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

彩虹文字效果

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

css制作彩虹

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

圆形彩虹效果

创建圆形彩虹可以使用径向渐变：

css制作彩虹

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

动画彩虹效果

添加动画使彩虹颜色流动：

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

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

彩虹边框效果

为元素添加彩虹边框：

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

这些方法可以根据需要调整颜色顺序、渐变方向和尺寸，创造出各种彩虹视觉效果。