Question

对于适用于移动浏览器的网络应用程序，我想整合this简单而优雅的预加载器。它将位于半透明叠加层之上。它也会在它上面有一些单词（例如＆＃34;请等待......＆＃34;或者＆＃34;等一下......等等＃34）。

我尝试整合所有这些。结果如下（运行代码段）。它有3个不同的问题（你可以帮我解决所有问题）：

1）我还没有能够将预加载器+它的文本放在半透明叠加层的顶部（虽然我使用了高z-index）。

2）此外，预加载器图形根据其上方句子的长度而变得偏斜。我希望它独立于此。

3）最后，他们并没有位于正中间（纵向）。

＆＃13;

body{background:#ECF0F1}

.parent{
  position:fixed;
  z-index:1;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.caption{
  margin-bottom:1em;
  color:gray;
  position:relative;
  z-index:10;
}

.load{
  width:50px;
  height:50px;
  position:relative;
  z-index:10;
  
}
.load hr{border:0;margin:0;width:40%;height:40%;position:fixed;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

.overlay{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0.6;
  z-index:100;
  background-color:#FFFFFF;
}

body {

   background: #E8F5E9;
   background: repeating-linear-gradient(
  to right,
 #FAFAFA,
  #FAFAFA 50px,
  #E8F5E9 50px,
  #E8F5E9 100px
);
 }

＆＃13;

<body>
  <div class="overlay">
    <div class="parent">
      <div class="caption">Lorem ipsum dolor sit amet ...</div>
      <div class="load">
        <hr><hr><hr><hr>
      </div>
    </div>
  </div>
<body>

＆＃13;

注意：我希望有纯CSS解决方案，没有JS参与。我也想避免flex-box，并寻求一些普遍的东西（在向后兼容的意义上）。例如。 flex-box支持旧版Android浏览器的缩减（根据caniuse.com）。我也想尊重这些版本，因此最好坚持使用支持良好的CSS 2.1属性。

Answer 1

问题在于它们被固定的hr元素，它们应该是绝对的，以保持它们与父容器的关系。然后只需将margin:auto添加到load即可居中。

由于parent和overlay元素都是固定位置，因此您可以将它们分开，以便能够正确使用z-index并避免应用叠加层的不透明度：

＆＃13;

body {
  background: #ECF0F1
}

.parent {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caption {
  margin-bottom: 1em;
  color: gray;
  position: relative;
  z-index: 10;
}

.load {
  width: 50px;
  height: 50px;
  position: relative;
  z-index: 10;
  margin: auto;
}

.load hr {
  border: 0;
  margin: 0;
  width: 40%;
  height: 40%;
  position: absolute;
  border-radius: 50%;
  animation: spin 2s ease infinite
}

.load :first-child {
  background: #19A68C;
  animation-delay: -1.5s
}

.load :nth-child(2) {
  background: #F63D3A;
  animation-delay: -1s
}

.load :nth-child(3) {
  background: #FDA543;
  animation-delay: -0.5s
}

.load :last-child {
  background: #193B48
}

@keyframes spin {
  0%,
  100% {
    transform: translate(0)
  }
  25% {
    transform: translate(160%)
  }
  50% {
    transform: translate(160%, 160%)
  }
  75% {
    transform: translate(0, 160%)
  }
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.6;
  z-index: 100;
  background-color: #FFFFFF;
}

body {
  background: #E8F5E9;
  background: repeating-linear-gradient( to right, #FAFAFA, #FAFAFA 50px, #E8F5E9 50px, #E8F5E9 100px);
}

＆＃13;

<div class="overlay">
</div>
<div class="parent">
  <div class="caption">Lorem ipsum dolor sit amet ...</div>
  <div class="load">
    <hr>
    <hr>
    <hr>
    <hr>
  </div>
</div>

＆＃13;

Answer 2

预加载器是叠加层的子项，因此它将具有父级不透明度，无法避免这种情况，但无法将其设置在叠加层之外，可能作为兄弟，并使用负数 z-index

至于大小调整，他忽略了父级大小，因为它们被设置为position：fixed，应该是绝对的

＆＃13;
＆＃13;
body { background: #ECF0F1 } .parent { position: fixed; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .caption { margin-bottom: 1em; color: gray; position: relative; z-index: 10; } .load { width: 50px; height: 50px; position: relative; z-index: 10; margin: auto; } .load hr { border: 0; margin: 0; width: 40%; height: 40%; position: absolute; border-radius: 50%; animation: spin 2s ease infinite } .load :first-child { background: #19A68C; animation-delay: -1.5s } .load :nth-child(2) { background: #F63D3A; animation-delay: -1s } .load :nth-child(3) { background: #FDA543; animation-delay: -0.5s } .load :last-child { background: #193B48 } @keyframes spin { 0%, 100% { transform: translate(0) } 25% { transform: translate(160%) } 50% { transform: translate(160%, 160%) } 75% { transform: translate(0, 160%) } } .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.6; z-index: -10; background-color: #FFFFFF; } body { background: #E8F5E9; background: repeating-linear-gradient( to right, #FAFAFA, #FAFAFA 50px, #E8F5E9 50px, #E8F5E9 100px); }
＆＃13;
<div class="overlay"> </div> <div class="parent"> <div class="caption">Lorem ipsum dolor sit amet ...</div> <div class="load"> <hr> <hr> <hr> <hr> </div> </div>
＆＃13;
＆＃13;
＆＃13;

定位元件的位置：彼此并排固定

2 个答案: