CSS加载屏幕不透明度问题

Question

嗨，如何在关键帧动画变为不透明度0后禁用它。因为我现在遇到的问题是它的不透明度为0，所以你不能在网页上按任何东西。我希望这是一个加载屏幕的网站，并使其逐渐消失。

<div class="splash-wrapper">
<img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/>

</div>
<style>
.splash-wrapper{
position: fixed;
z-index: 9999;
background-color: #ffffff;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 2s;
}
.scale-out-center {
animation: scale-out-center 1s ease-in both;
}
@keyframes slideOut{
from {opacity: 1;}
to{opacity: 0;)

</style>

Answer 1

您可以尝试一下，到目前为止，它正在运行。我在关键帧中添加了可见性和z索引。

该显示不适用于CSS转换或动画。

<div class="splash-wrapper">
<img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/>

</div>
<button>click me</button>
<style>
.splash-wrapper{
position: fixed;
z-index: 9999;
background-color: #ffffff;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 2s;
}
.scale-out-center {
animation: scale-out-center 1s ease-in both;
}
@keyframes slideOut{
from {opacity: 1;}
to{opacity: 0; visibility: hidden; z-index: -1}}

</style>

Answer 2

您可以使用css指针事件属性：

.splash-wrapper {
pointer-events: none;
}

当设置为none时：

元素永远不是指针事件的目标；但是，指针如果其子代元素具有指针事件设置为其他值。在这些情况下，指针事件将触发此父元素上的事件侦听器作为在活动期间往返后代的途中适当捕获/气泡阶段。

所有现代浏览器都支持它-查看犬科