css制作动态彩虹

使用CSS线性渐变和动画

创建一个水平彩虹背景，通过CSS动画实现颜色流动效果。彩虹通常包含红、橙、黄、绿、蓝、靛、紫七种颜色。

.rainbow {
  height: 100px;
  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;
  }
}

使用CSS径向渐变制作圆形彩虹

实现一个旋转的圆形彩虹效果，结合径向渐变和旋转动画。

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

彩虹边框动画效果

为元素添加动态彩虹边框，通过边框渐变和动画实现流动效果。

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

@keyframes border-rainbow {
  0% {
    border-image-source: linear-gradient(
      to right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
  }
  100% {
    border-image-source: linear-gradient(
      to left,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
  }
}

彩虹文字效果

为文字添加彩虹颜色，并通过动画使颜色变化。

.rainbow-text {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: rainbow-text 3s linear infinite;
}

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

彩虹阴影效果

创建具有彩虹颜色阴影的元素，阴影颜色随时间变化。

.rainbow-shadow {
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 10px;
  animation: shadow-rainbow 4s linear infinite;
}

@keyframes shadow-rainbow {
  0% {
    box-shadow: 0 0 20px red;
  }
  16% {
    box-shadow: 0 0 20px orange;
  }
  32% {
    box-shadow: 0 0 20px yellow;
  }
  48% {
    box-shadow: 0 0 20px green;
  }
  64% {
    box-shadow: 0 0 20px blue;
  }
  80% {
    box-shadow: 0 0 20px indigo;
  }
  100% {
    box-shadow: 0 0 20px violet;
  }
}

这些CSS技术可以单独使用，也可以组合应用来创建更复杂的彩虹效果。调整动画时间、颜色顺序和元素尺寸可以定制不同的视觉效果。