Question

我尝试在采取行动之前想象加载区域。它适用于Chrome浏览器，但不适用于IE和Firefox。

这是我的代码：

＆＃13;

#loading {
    width:200px;
    height:100px;
    margin: 50px auto;
    margin-top: 200px;
    margin-bottom: 700px;
}



#loading span {
    height:80px;
    width:15px;
    background:#27a4dd;
    display:inline-block;
    animation:loader 1s infinite;
  border: none;
}

#loading p {
  color: #27a4dd;
  font-size: 20px;
  font-family: Helvetica;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 300;
  letter-spacing: .05em;
  text-align: center;
}
@keyframes loader{
    50% { -webkit-transform: scale3d(1,.3,1) translate3d(0px,0px,0px); opacity:.5; }
}

#loading span:nth-child(1) {animation-delay:.1s;}
#loading span:nth-child(2) {animation-delay:.2s;}
#loading span:nth-child(3) {animation-delay:.3s;}
#loading span:nth-child(4) {animation-delay:.4s;}
#loading span:nth-child(5) {animation-delay:.5s;}
#loading span:nth-child(6) {animation-delay:.6s;}

＆＃13;

<div style="text-align: center;" id="loading">

＆＃13;

任何人都知道如何正确地做到这一点？

加载区域在Firefox / IE中不起作用，但在Chrome中起作用

0 个答案: