我想添加一张覆盖我网站主页的图像。 几秒钟后,该图像应消失。 我尝试过,但是图像占用了破坏所有内容的元素的空间。 我能怎么做? 谢谢!!!!
如果没有立即提供示例,我深表歉意 我只是试图使用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';
}
答案 0 :(得分: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>
希望它能为您提供想象的方向。干杯