1
これは私が使いたい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>現在の背景は画像をロードしている間、覆われており、それが目標ですされていません。 私はコンテンツのプロパティを使ってみましたが、実際に私のために働いていません。
私が達成しようとしているのは、すべての画像がロードされ、画面が透明なグレー/黒で覆われているときに、中央揃えのテキストで画面を読み込むことです。
画像が実際にロードされているときに画面を読み込む必要があります。