Question

我正在尝试使背景在5秒左右的时间内从一张图像平滑过渡到另一幅图像，但是当图像过渡到另一幅图像时，它会闪烁一秒钟。

我已经尝试过CSS @keyframes

我尝试将关键帧的结尾比例设为100％，但是当需要从bgr6过渡到bgr1时，这并不顺利。

对于HTML，它只是<div class="background-images">顶部的<body>。

这在大多数情况下都可以正常工作，但是当图像过渡时，它会闪烁并显示背景颜色一秒钟，我想解决这个问题。开放思想。

.background-images {
  background-image: url(https://via.placeholder.com/300/0000FF/808080?Text=default);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -2;
  margin: auto;
  animation: dynamicBGR 30s infinite;
}

@keyframes dynamicBGR {
  15% {
    background-image: url('https://via.placeholder.com/300/FF00FF/888080?text=15')
  }
  30% {
    background-image: url('https://via.placeholder.com/300/00FFFF/808880?text=30')
  }
  45% {
    background-image: url('https://via.placeholder.com/300/0000FF/808080?text=45')
  }
  60% {
    background-image: url('https://via.placeholder.com/300/AA00FF/BB8080?text=60')
  }
  75% {
    background-image: url('https://via.placeholder.com/300/0088FF/999080?text=75')
  }
}

<div class="background-images"></div>

自动更改背景图像

0 个答案: