背景色滑块

asohasf1241

我正在尝试制作背景色滑块。几乎就像一个自动图像滑块，该滑块每5秒更改一次图像，但是使用颜色而不是图像。背景应从黄色过渡到蓝色，再过渡到红色。

这是我能得到的最接近的颜色，但它会使颜色褪色。我希望颜色静态过渡。像图像滑块一样上色。

div {
  animation: bgColor 10s;
  width: 200px;
  height: 100px;
}
@keyframes bgColor {
  33.33% {
    background-color: #ffc60b;
  }
  66.66% {
    background-color: #90a0d6;
  }
  100% {
    background-color: #ff6666;
  }
}

<div></div>

阿维亚

因此，您可以在：root中设置AnimateCSS库的动画持续时间（5秒）。

然后，通过CDN加载AnimateCSS库。

最后，您需要为每个div框指定一个始终比上一个框高的z-index，以使其显示在上一个颜色的“上方”。

还要根据您的参数调整动画延迟。

:root {
  --animate-duration: 5000ms;
}

.c {
  position:absolute;width:250px;height:200px;overflow:hidden;
}

.box {
  min-width:250px;width:250px;height:200px;position:absolute;
}

.div1 {
  background:blue;
}
.div2{background:purple;z-index:5;animation-delay:5s;}
.div3{background:green;z-index:10;animation-delay:10s;}

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<div class="c">
  <div class="box div1 animate__animated animate__slideInLeft"></div>
    <div class="box div2 animate__animated animate__slideInLeft"></div>
   <div class="box div3 animate__animated animate__slideInLeft"></div>
<div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。