Question

我想添加一张覆盖我网站主页的图像。几秒钟后，该图像应消失。我尝试过，但是图像占用了破坏所有内容的元素的空间。我能怎么做？谢谢！！！！

如果没有立即提供示例，我深表歉意我只是试图使用CSS使图像消失

    #fadeout {
    opacity: 1;
    transition: 1s opacity;
    text-align: center;
    font-size:32px;
  }

  p {
    text-align: center;
  }

然后我尝试用javascript使图像消失：

 window.onload = function() {
  window.setTimeout(fadeout, 3000); 

}

function fadeout() {
  document.getElementById('TEST').style.opacity = '0';
}

Answer 1

我个人将做一个简单的css动画，就像一个简单的假飞溅加载程序一样；

@keyframes reveal {
 0% {opacity: 1;}
 75% {opacity: 1;}
 99% {opacity: 0;}
 100% {opacity: 0; display: none;}
}

#splash-loader {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: lightgray url('https://i.imgur.com/bX2Uk7C.jpg') no-repeat center;
  background-size: cover;
  opacity: 0;
  animation: reveal 6s ease forwards;
}


#spinner {
  height: 10rem;
  width: 10rem;
  margin: 5rem auto;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(255,255,255,.5);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgaWQ9InNwaW4taWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwMCA3MDAiIGhlaWdodD0iMzJweCIgd2lkdGg9IjMycHgiPiAgICA8c3R5bGU+ICAgIEAtd2Via2l0LWtleWZyYW1lcyBzcGluTG9hZCB7ICAgICAgdG8geyAgICAgICAgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgLW1vei10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgLW1zLXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtby10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICB9ICAgIH0gICAgQC1tb3ota2V5ZnJhbWVzIHNwaW5Mb2FkIHsgICAgICB0byB7ICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbW96LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbXMtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICAgIC1vLXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgIH0gICAgfSAgICBAa2V5ZnJhbWVzIHNwaW5Mb2FkIHsgICAgICB0byB7ICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbW96LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbXMtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICAgIC1vLXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgIH0gICAgfSAgICAgI3NwaW4taWNvbiB7ICAgICAgZmlsbDogZ3JheTsgICAgICBhbmltYXRpb246IHNwaW5Mb2FkIDJzIGxpbmVhciBpbmZpbml0ZTsgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbkxvYWQgMnMgbGluZWFyIGluZmluaXRlOyAgICB9ICA8L3N0eWxlPiAgPHBhdGggZD0iTTQ2MiA4NTBjLTYgMC0xMS01LTExLTExbDAtMTgzIDAgMGMwLTYgNS0xMSAxMS0xMWw2OSAwYzEgMCAxIDAgMSAwIDcgMCAxMiA1IDEyIDExbDAgMTgzIDAgMGMwIDYtNSAxMS0xMiAxMWwtNjkgMGMwIDAgMCAwLTEgMHogICBtMjUwLTQ3Yy00IDEtOC0yLTEwLTVsLTkxLTE1OCAwIDBjLTQtNi0yLTEzIDQtMTZsNjAtMzRjMC0xIDAtMSAwLTEgNi0zIDEzLTEgMTYgNGw5MSAxNThjMyA2IDIgMTMtNCAxNmwtNjEgMzVjLTEgMS0zIDEtNSAxeiAgIG0tNDI4LTJjLTIgMC00LTEtNi0ybC02MS0zNWMtNS0zLTctMTAtNC0xNmw5MS0xNTdjMCAwIDAgMCAwIDAgMy02IDEwLTggMTYtNWw2MSAzNWM1IDQgNyAxMSA0IDE2bC05MSAxNTdjMCAxIDAgMSAwIDEtMiA0LTYgNi0xMCA2eiAgIG02MjAtMTYzYy0yIDAtNCAwLTYtMWwtMTU3LTkxYzAgMCAwIDAgMCAwLTYtMy04LTEwLTUtMTZsMzUtNjFjNC01IDExLTcgMTYtNGwxNTcgOTFjMSAwIDEgMCAxIDAgNiAzIDcgMTEgNCAxNmwtMzUgNjFjLTIgNC02IDYtMTAgNXogICBtLTgxMC00Yy01IDAtOS0yLTExLTZsLTM1LTYxYy0zLTUtMS0xMiA0LTE1bDE1OC05MSAwIDBjNi00IDEzLTIgMTYgNGwzNSA2MGMwIDAgMCAwIDAgMCAzIDYgMSAxMy00IDE2bC0xNTggOTFjLTIgMS00IDItNSAyeiAgIG03MTItMjM1bDAgMGMtNiAwLTExLTUtMTEtMTFsMC02OWMwLTEgMC0xIDAtMSAwLTcgNS0xMiAxMS0xMmwxODMgMCAwIDBjNiAwIDExIDUgMTEgMTJsMCA2OWMwIDAgMCAwIDAgMSAwIDYtNSAxMS0xMSAxMWwtMTgzIDB6ICAgbS03OTQtNWwwIDBjLTcgMC0xMi01LTEyLTEybDAtNjljMCAwIDAgMCAwLTEgMC02IDUtMTEgMTItMTFsMTgyIDAgMCAwYzYgMCAxMSA1IDExIDExbDAgNjljMCAxIDAgMSAwIDEgMCA3LTUgMTItMTEgMTJsLTE4MiAweiAgIG03NzItMTUzYy00IDAtOC0yLTEwLTZsLTM0LTYwYy0xIDAtMSAwLTEgMC0zLTYtMS0xMyA0LTE2bDE1OC05MWM2LTMgMTMtMSAxNiA0bDM1IDYxYzMgNSAxIDEyLTQgMTVsLTE1OCA5MiAwIDBjLTIgMS00IDEtNiAxeiAgIG0tNTY2LTVjLTEgMC0zIDAtNS0xbC0xNTctOTFjMCAwLTEgMC0xIDAtNS0zLTctMTAtNC0xNmwzNS02MWMzLTUgMTAtNyAxNi00bDE1NyA5MWMwIDAgMCAwIDAgMCA2IDMgOCAxMCA1IDE2bC0zNSA2MWMtMyAzLTcgNi0xMSA1eiAgIG00NjgtMTIxYy0yIDAtNCAwLTYtMWwtNjEtMzVjLTUtNC03LTExLTQtMTZsOTEtMTU3YzAtMSAwLTEgMC0xIDMtNiAxMS03IDE2LTRsNjEgMzVjNSAzIDcgMTAgNCAxNmwtOTEgMTU3YzAgMCAwIDAgMCAwLTIgNC02IDYtMTAgNnogICBtLTM2Ny0yYy00IDAtOC0yLTEwLTZsLTkxLTE1OGMtMy02LTEtMTMgNC0xNmw2MS0zNWM1LTMgMTItMSAxNSA0bDkyIDE1OCAwIDBjMyA2IDEgMTMtNSAxNmwtNjAgMzVjMCAwIDAgMCAwIDAtMiAxLTQgMS02IDJ6ICAgbTE0OS01OGMtNyAwLTEyLTUtMTItMTFsMC0xODMgMCAwYzAtNiA1LTExIDEyLTExbDY5IDBjMCAwIDAgMCAxIDAgNiAwIDExIDUgMTEgMTFsMCAxODMgMCAwYzAgNi01IDExLTExIDExbC02OSAwYy0xIDAtMSAwLTEgMHoiIC8+PC9zdmc+);
}

<div id="splash-loader">
 <div id="spinner"></div>
</div>

<h2>Hey I'm your normal content, howdy</h2>

希望它能为您提供想象的方向。干杯

演示文稿图像CSS-JavaScript

1 个答案: