CSS在不透明度的整個頁面上加載動畫

這是我想要使用的CSS動畫。這裏是我的了：載入圖像時，不覆蓋CSS在不透明度的整個頁面上加載動畫

.img { 
 
width:300px; 
 
height:100%; 
 
} 
 
.loading { 
 
content ="Loading"; 
 
    background-color: black; 
 
    color: white; 
 
    opacity: 0.5; 
 
    font-family: PT Sans Narrow; 
 

 
    font-size: 30px; 
 
    top: 45%; 
 
    left: 45%; 
 
    
 
    position: absolute; 
 
} 
 

 
.loading:after { 
 
    
 
    overflow: hidden; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    -webkit-animation: ellipsis steps(5,end) 1000ms infinite;  
 
    animation: ellipsis steps(5,end) 1000ms infinite; 
 
    content: "\2026\2026"; /* ascii code for the ellipsis character */ 
 
    width: 0px; 
 
} 
 

 
@keyframes ellipsis { 
 
    to { 
 
    width: 1.15em;  
 
    } 
 
} 
 

 
@-webkit-keyframes ellipsis { 
 
    to { 
 
    width: 1.5em;  
 
    } 
 
}

<html> 
 
<div class="loading">Loading</div> 
 

 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
</html>

目前背景下，這是一個目標。我嘗試使用內容屬性，但它不是真的爲我工作。

我想要存檔的是當所有圖像加載和屏幕覆蓋透明灰色/黑色加載中心文本屏幕。

我需要加載屏幕時圖像實際加載。

來源

2017-07-31 AESTHETICS

我已經添加了遵循自己的代碼.loading：

position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center;

position: fixed允許浮動視圖，而滾動的元素。 top和left將固定元素對齊左上角。爲了使文字與中心對齊，我使用了flex。詳細瞭解flexbox here。 align-items: center垂直對齊Flexbox元素中的所有元素。 justify-content: center也是如此，除了水平。

.img { 
 
width:300px; 
 
height:100%; 
 
} 
 
.loading { 
 
    content ="Loading"; 
 
    background-color: black; 
 
    color: white; 
 
    opacity: 0.5; 
 
    font-family: PT Sans Narrow; 
 

 
    font-size: 30px; 
 
    
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.loading:after { 
 
    
 
    overflow: hidden; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    -webkit-animation: ellipsis steps(5,end) 1000ms infinite;  
 
    animation: ellipsis steps(5,end) 1000ms infinite; 
 
    content: "\2026\2026"; /* ascii code for the ellipsis character */ 
 
    width: 0px; 
 
} 
 

 
@keyframes ellipsis { 
 
    to { 
 
    width: 1.15em;  
 
    } 
 
} 
 

 
@-webkit-keyframes ellipsis { 
 
    to { 
 
    width: 1.5em;  
 
    } 
 
}

<html> 
 
<div class="loading">Loading</div> 
 

 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
<img src="http://i.imgur.com/iQUErgs.png" class="img"></img> 
 
</html>

來源

2017-07-31 23:57:42

CSS在不透明度的整個頁面上加載動畫

回答

相關問題