我试图操纵我的 body 标签的 :before 伪元素在一定时间后出现,然后在几秒钟后再次消失。
body:before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background: #color;
}
所以,从本质上讲,我试图在 X 秒后显示这个带有伪元素的完整视口(viewport)叠加层,然后在经过一段时间后,我想再次将其删除!
我该如何解决这个问题?
最佳答案
你可以用纯 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;
关于javascript - 使伪元素出现,然后在 X 时间后再次消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51899350/