Question

这是我想要使用的CSS动画。这是我得到的：

＆＃13;

.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;    
  }
}

＆＃13;

<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>

＆＃13;

目前，在加载图像时不会覆盖背景，这是一个目标。我尝试使用内容属性，但它并没有真正为我做好准备。

我想要实现的目的是在加载所有图像并以透明灰色/黑色覆盖屏幕时加载带居中文本的屏幕。

我需要在实际加载图片时加载屏幕。

Answer 1

我已在.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做同样的事情，除了横向。

＆＃13;

.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;    
  }
}

＆＃13;

<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>

＆＃13;

CSS使用不透明度在整个页面上加载动画

1 个答案: