logo标签列表

CSS动画闪烁问题

htmlcss
3

你好，我想制作背景图片并使其互相更换。我意识到可以使用CSS动画和关键帧实现，但当我编码第一批照片时，它会闪烁，然后动画会以正常方式继续（我认为问题出在WebGL上，它渲染内容并且图像尚未下载）。你能帮我修复这段代码，以防止这种情况发生吗？

.landing-page {
  background-image: linear-gradient(
    to bottom,
    rgba(104, 104, 104, 0),
    rgba(0, 0, 0, 0.739)
  );
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  width: 100vw;
  background-position: center;
  display: flex;
  align-items: flex-end;
  animation: change 120s infinite ease-in-out;
}

@keyframes change {
  0% {
    background-image: url(/photos/profile1.jpg);
  }
  20% {
    background-image: url(/photos/profile3.jpg);
  }
  40% {
    background-image: url(/photos/profile4.jpg);
  }
  60% {
    background-image: url(/photos/profile5.jpg);
  }
  80% {
    background-image: url(/photos/profile6.jpg);
  }
  100% {
    background-image: url(/photos/profile2.jpg);
  }
}
你真的想让它在两分钟内持续淡入淡出图片吗？ - DBS
时间并不重要，我甚至尝试了更短的时间段。 - Michael Hajný
1个回答
1
您可以使用链接类型preload预加载图片：

preload元素的rel属性值让您能够在HTML的<head>中声明获取请求，指定页面很快将需要的资源，您希望在浏览器主要渲染机制启动之前就开始提前加载。这确保它们可以更早地可用，并且不太可能阻止页面的渲染，从而提高性能。参考文献

<head>
  <link rel="preload" as="image" href="/photos/profile1.jpg">
  ...
  <link rel="preload" as="image" href="/photos/profile6.jpg">

此外还有链接类型prefetch。

同时，将第一帧放在结尾，100%，以实现每次迭代之间的平滑过渡：

@keyframes change {
  0% { background-image: url(/photos/profile1.jpg); }
  ...
  100% { background-image: url(/photos/profile1.jpg); }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接