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

我相信你需要设置 display: none 后它会达到 0 不透明度。

Answer 2

您可以使用 css pointer-events property:

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

设置为none时比：

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

所有现代浏览器都支持它 - check on caniuse

Answer 3

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

显示不适用于 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>

CSS 加载屏幕不透明问题

CSS loading screen opacity issue

css

squarespace