css 制作彩虹

使用CSS制作彩虹效果

通过CSS的线性渐变和圆形渐变可以轻松实现彩虹效果。以下是几种常见的实现方法：

线性彩虹条

.rainbow {
  height: 20px;
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff7f00 20%,
    #ffff00 40%,
    #00ff00 60%,
    #0000ff 80%,
    #4b0082 100%
  );
}

圆形彩虹

.rainbow-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #ff0000
  );
}

动画彩虹效果

.rainbow-animated {
  height: 20px;
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082
  );
  background-size: 400% 100%;
  animation: rainbow 5s linear infinite;
}

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

彩虹边框

.rainbow-border {
  width: 200px;
  height: 100px;
  border: 10px solid transparent;
  border-image: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082
  ) 1;
}

这些方法可以根据需要调整颜色、尺寸和方向来创建不同的彩虹效果。