这是我想使用的 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>目前，在加载图像时背景不会被覆盖，这是一个目标。 我尝试使用内容属性，但它对我来说并没有真正发挥作用。
我想要实现的是当所有图像加载并且屏幕覆盖透明灰色/黑色时，加载带有居中文本的屏幕。
当图像实际加载时，我需要加载屏幕。
最佳答案
我已将以下内容添加到 .loading 中的代码中:
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position:fixed 允许元素在滚动时 float 在 View 中。 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>关于javascript - CSS 在整个页面上加载不透明度动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45426849/