小编Sna*_*ase的帖子

使用动画更改背景图像时如何摆脱白色闪光?

该代码使站点的背景图像在 5 个不同的图像之间转换,但每次动画完成且下一个动画开始时,都会出现白色闪光。我该如何摆脱它或我做错了什么?我不知道如何以任何其他方式解释它。

@keyframes backswitch {
  0% {
    background-image: url("background.jpg");
  }
  20% {
    background-image: url("background_2.jpg");
  }
  40% {
    background-image: url("background_3.jpg");
  }
  60% {
    background-image: url("background_4.jpg");
  }
  80% {
    background-image: url("background_5.jpg");
  }
  100% {
    background-image: url("background_6.jpg");
  }
}

body {
  /*Adjusting images and animation*/
  background-repeat: no-repeat;
  max-width: 100%;
  max-height: 100%;
  background-size: cover;
  animation-name: backswitch;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>

<body>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

html css css-animations

6
推荐指数
1
解决办法
1751
查看次数

标签 统计

css ×1

css-animations ×1

html ×1