javascript - 使伪元素出现，然后在 X 时间后再次消失

Question

我试图操纵我的 body 标签的 :before 伪元素在一定时间后出现，然后在几秒钟后再次消失。

body:before {
  content: " ";
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background: #color;
}

所以，从本质上讲，我试图在 X 秒后显示这个带有伪元素的完整视口(viewport)叠加层，然后在经过一段时间后，我想再次将其删除!

我该如何解决这个问题？

Answer 1

你可以用纯 CSS 做这样的事情:

body:before {
  content: " ";
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background: red;
  animation: show 5s ease-out forwards;
  
}

@keyframes show{
  0%{
    content: "";
    opacity: 0;
  }
  20%{
    content: "";
    opacity: 1;
  }
  90%{
    content: "";
    opacity: 1;
  }
  100%{
    content: none;
    opacity: 0;
  }
}

Hello World!

要选择持续时间，只需调整表示秒的字母“s”前的数字:

animation: show ***5s*** ease-out forwards;