Question

我正在尝试制作背景色滑块。几乎就像一个自动图像滑块，该滑块每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>

Answer 1

因此，您可以在：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>

Answer 2

如果您不需要过渡，可以做

div {
  animation: bgColor 10s forwards;
  width: 200px;
  height: 100px;
}
@keyframes bgColor {
  
  0%,33%{
    background: #ffc60b;
  }
  33.1%,66.66%{
    background: #90a0d6;
  }
  66.67%,100%{
    background: #ff6666;
  }
  
}

我对动画进行了添加，以便在动画完成并且您可以使用javascript时卡住


let div = document.querySelector('div');

div.style.background = '#ffc60b'

setTimeout(()=> div.style.background = '#90a0d6', 10000/3)
setTimeout(()=> div.style.background = '#ff6666', 10000)

背景色滑块

2 个答案: