如何，一旦屏幕加載時

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>