javascript - 更改身体不透明度关键帧

Question

我想使用关键帧更改身体不透明度，也可以使用 javascript，因为我的最终目标是获取一堆图片并在后台将它们制作成幻灯片类型的东西，而不是使用 div，因为这会弄乱我拥有的其他内容但是，在网站上，显然如果唯一的方法是使用 div 那么我想我将不得不:)

变色有效，但不透明度无效。

想知道是否有人可以提供帮助，这是我的CSS。

body {
  animation: back 5s infinite;
  
}

@keyframes back {
  0% {
    background: red;
    opacity: 1;
  }

  50% {
    background: yellow;
    opacity: 0;
  }

  100% {
    background: red;
    opacity: 1;
  }
}

 

标签： javascripthtmlcsskeyframe

Answer 1

这是因为背景传播在 html 元素上制作了背景，而不再是 body 元素。

为避免这种情况，为 html 添加白色背景（或任何非透明背景）并确保正文至少是全高：

body {
  animation: back 5s infinite;
  margin:0;
  min-height:100vh;

}

@keyframes back {
  0% {
    background: red;
    opacity: 1;
  }

  50% {
    background: yellow;
    opacity: 0;
  }

  100% {
    background: red;
    opacity: 1;
  }
}

html {
  background:#fff;
}