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在不透明度的整个页面上加载动画

回答

相关问题