css制作彩虹

使用CSS线性渐变制作彩虹

通过CSS的linear-gradient属性可以创建彩虹效果。彩虹通常由红、橙、黄、绿、蓝、靛、紫七种颜色组成。

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

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

如果需要圆形彩虹效果，可以使用radial-gradient属性。

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

添加动画效果

为了让彩虹更有活力，可以添加CSS动画效果。

.rainbow-animated {
  width: 100%;
  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 {
  position: relative;
  width: 200px;
  height: 200px;
}

.rainbow-border::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  z-index: -1;
  border-radius: 10px;
}

响应式彩虹效果

使用CSS变量和视口单位可以让彩虹效果更具响应性。

.rainbow-responsive {
  width: 100vw;
  height: 5vh;
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}