如何，一旦屏幕加载时

Question

@import url(http://fonts.googleapis.com/css?family=Play:400,700); 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: #222; 
 
    font-family: "Play"; 
 
} 
 

 
h1 { 
 
    font-size: 2rem; 
 
    color: #FFF; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 

 
.smart-glass { 
 
    position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 288px; 
 
    height: 388px; 
 
} 
 

 
.logo { 
 
    width: 288px; 
 
    height: 288px; 
 
    position: relative; 
 
} 
 

 
.circle { 
 
    padding: 20px; 
 
    border: 6px solid transparent; 
 
    border-top-color: #40A800; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: connect 2.5s linear infinite; 
 
} 
 

 
.xbox { 
 
    background: #FFF; 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 100%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 
.xbox:after, .xbox:before { 
 
    content: ""; 
 
    display: block; 
 
    border-top: 10px solid #222; 
 
    border-radius: 50%; 
 
    height: 90%; 
 
    width: 120%; 
 
    transform: rotate(-45deg); 
 
    position: absolute; 
 
    right: -30%; 
 
    top: 15%; 
 
} 
 
.xbox:before { 
 
    left: -30%; 
 
    transform: rotate(45deg); 
 
} 
 

 
.loading-text { 
 
    text-transform: uppercase; 
 
    color: #FFF; 
 
    text-align: center; 
 
    margin: 10px 0; 
 
    font-size: 1.4rem; 
 
} 
 

 
@keyframes connect { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(-360deg); 
 
    } 
 
}

<div class="smart-glass"> 
 
    <h1>Xbox</h1> 
 
    <div class="logo"> 
 
    <div class="circle"> 
 
     <div class="circle"> 
 
      <div class="circle"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="hold-x"> 
 
    <div class="xbox"></div> 
 
    </div> 
 
    </div> 
 
    <div class="loading-text"> 
 
    Loading... 
 
    </div> 
 
</div>

停止加载动画嗯，我看到了一个网站此加载动画和我计划将其插入到我的代码，但我遇到的问题是，如何一旦页面完成加载后，我是否停止动画？任何帮助将高度赞赏

Answer 1

可以先fadeOut动画部分，然后remove它的DOM内容

$(".smart-glass").fadeOut(3000,function(){ // Will fade out in 3 secs 
    $(".smart-glass").remove(); // animated part will be removed from DOM 
    $('body').css('background-color',"#fff"); // background will be changed to white 
}) 
}) 

PLUNKER

Answer 2

你可以这样做：

$('.smart-glass').css('display','none'); 

这里我设置的时间间隔隐藏。有些时候隐藏。当您想隐藏动画时，您可以使用上述代码。

setInterval(function(){ $('.smart-glass').fadeOut(); 
 
$('body').css('background', 'transparent'); 
 

 
}, 5000);

@import url(http://fonts.googleapis.com/css?family=Play:400,700); 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: #222; 
 
    font-family: "Play"; 
 
} 
 

 
h1 { 
 
    font-size: 2rem; 
 
    color: #FFF; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 

 
.smart-glass { 
 
    position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 288px; 
 
    height: 388px; 
 
} 
 

 
.logo { 
 
    width: 288px; 
 
    height: 288px; 
 
    position: relative; 
 
} 
 

 
.circle { 
 
    padding: 20px; 
 
    border: 6px solid transparent; 
 
    border-top-color: #40A800; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: connect 2.5s linear infinite; 
 
} 
 

 
.xbox { 
 
    background: #FFF; 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 100%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 
.xbox:after, .xbox:before { 
 
    content: ""; 
 
    display: block; 
 
    border-top: 10px solid #222; 
 
    border-radius: 50%; 
 
    height: 90%; 
 
    width: 120%; 
 
    transform: rotate(-45deg); 
 
    position: absolute; 
 
    right: -30%; 
 
    top: 15%; 
 
} 
 
.xbox:before { 
 
    left: -30%; 
 
    transform: rotate(45deg); 
 
} 
 

 
.loading-text { 
 
    text-transform: uppercase; 
 
    color: #FFF; 
 
    text-align: center; 
 
    margin: 10px 0; 
 
    font-size: 1.4rem; 
 
} 
 

 
@keyframes connect { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(-360deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="smart-glass"> 
 
    <h1>Xbox</h1> 
 
    <div class="logo"> 
 
    <div class="circle"> 
 
     <div class="circle"> 
 
      <div class="circle"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="hold-x"> 
 
    <div class="xbox"></div> 
 
    </div> 
 
    </div> 
 
    <div class="loading-text"> 
 
    Loading... 
 
    </div> 
 
</div>