CSS3：加载器动画

时间：2017-07-19 15:46:49

标签： html css3

Image

您好，我想在图片中安装一个装载程序。

我试过这段代码。我有方形div，而不是像图像中那样想要矩形div。

@-moz-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@-webkit-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
.preparing_loader .throb-group .fa-square {
  display: inline-block;
  -moz-animation: throbber 1.8s infinite;
  -webkit-animation: throbber 1.8s infinite;
  animation: throbber 1.8s infinite;
  font-size: 14px;
  color: #ccc;
}
.preparing_loader .throb-group .fa-square:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.preparing_loader .throb-group .fa-square:nth-child(2) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.preparing_loader .throb-group .fa-square:nth-child(3) {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.preparing_loader .throb-group .fa-square:nth-child(4) {
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.preparing_loader .throb-group .fa-square:nth-child(5) {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.preparing_loader .throb-group .fa-square:nth-child(6) {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.preparing_loader .throb-group {
  margin: 10px auto;
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="preparing_loader text-center">
        
          <div class="throb-group">
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
        </div>
      </div>

如何将fa fa-sqaure覆盖为矩形。我只想用矩形改变方形。

任何帮助都会很棒。

谢谢。

2 个答案:

答案 0 :(得分：1)

您可以创建带有矩形视图的div而不是＆＃34; i＆＃34;并改变动画背景颜色而不是颜色。

＆＃13;
＆＃13; 
.rectangle {
  display: inline-block;
  width: 20px;
  height: 10px;
  background-color: #ccc;
}

@keyframes throbber {
  0% {
    background-color: #333;
  }
  40% {
    background-color: #ccc;
  }
  100% {
    background-color: #ccc;
  }
}
.rectangle {
  display: inline-block;
  -moz-animation: throbber 1.8s infinite;
  -webkit-animation: throbber 1.8s infinite;
  animation: throbber 1.8s infinite;
  font-size: 14px;
  color: #ccc;
}
.rectangle:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.rectangle:nth-child(2) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.rectangle:nth-child(3) {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.rectangle:nth-child(4) {
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.rectangle:nth-child(5) {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.rectangle:nth-child(6) {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.preparing_loader .throb-group {
  margin: 10px auto;
  width: 100%;
}
＆＃13; 
<div class="preparing_loader text-center">
        
          <div class="throb-group">
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
        </div>
      </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用transform scale现有的Font Awesome图标，然后调整其width以防止邻居重叠：

i {
  transform: scale(1.5, 1);
  width: 20px;
}

工作样本：

@-moz-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@-webkit-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
.preparing_loader .throb-group .fa-square {
  display: inline-block;
  -moz-animation: throbber 1.8s infinite;
  -webkit-animation: throbber 1.8s infinite;
  animation: throbber 1.8s infinite;
  font-size: 14px;
  color: #ccc;
}
.preparing_loader .throb-group .fa-square:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.preparing_loader .throb-group .fa-square:nth-child(2) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.preparing_loader .throb-group .fa-square:nth-child(3) {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.preparing_loader .throb-group .fa-square:nth-child(4) {
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.preparing_loader .throb-group .fa-square:nth-child(5) {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.preparing_loader .throb-group .fa-square:nth-child(6) {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.preparing_loader .throb-group {
  margin: 10px auto;
  width: 100%;
}

i {
  transform: scale(1.5, 1);
  width: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="preparing_loader text-center">
        
          <div class="throb-group">
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
        </div>
      </div>

相关问题
最新问题