如何在 2 秒后停止加载动画？
我想制作一个加载屏幕和一个淡入淡出的页面，如下所示：https : //www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5。问题是我不知道如何结束加载循环并使其褪色。
代码
<body>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</body>
body {
background-color: #636e72;
}sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: 50%;
left: 50%;
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
@keyframes sk-chase {
100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}
HUX布斯2回答
-
Qyouu
animation: sk-chase 2.5s infinite linear both;Wordinfinite是你的问题。改为使用多个代表infinite。在你的情况下是1。 -
慕森卡
您需要 JavaScript 来告诉浏览器何时隐藏加载程序并显示内容。见下面的片段var myVar;function myFunction() { myVar = setTimeout(showPage, 3000);}function showPage() { document.querySelector("#loader").style.display = "none"; document.querySelector("#myDiv").style.display = "block"; document.querySelector("body").style.backgroundColor = "white";}body { background-color: #636e72;}.sk-chase { width: 40px; height: 40px; animation: sk-chase 2.5s infinite linear both; display: flex; justify-content: center; align-items: center; margin: 0 auto; top: calc(50% - 20px); left: calc(50% - 20px); position: absolute;}.sk-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sk-chase-dot 2.0s infinite ease-in-out both;}.sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: #fff; border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both;}.sk-chase-dot:nth-child(1) { animation-delay: -1.1s;}.sk-chase-dot:nth-child(2) { animation-delay: -1.0s;}.sk-chase-dot:nth-child(3) { animation-delay: -0.9s;}.sk-chase-dot:nth-child(4) { animation-delay: -0.8s;}.sk-chase-dot:nth-child(5) { animation-delay: -0.7s;}.sk-chase-dot:nth-child(6) { animation-delay: -0.6s;}.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s;}.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s;}.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s;}.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s;}.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s;}.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s;}@keyframes sk-chase { 100% { transform: rotate(360deg); }}@keyframes sk-chase-dot { 80%, 100% { transform: rotate(360deg); }}@keyframes sk-chase-dot-before { 50% { transform: scale(0.4); } 100%, 0% { transform: scale(1.0); }}<body onload="myFunction()"> <div id="loader" class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> <div style="display:none;" id="myDiv" class="animate-bottom"> <h2>Tada!</h2> <p>Some text in my newly loaded page..</p> </div></body>
随时随地看视频慕课网APP
相关分类
JavaScript