Question

所以我正在制作一个预加载器动画，它将是一个带有交叉渐变背景图像的4个div。我希望他们在0.6秒内完美交叉，但我没有运气。他们互相重叠太多，这只是一团糟。我觉得我只需要合适的百分比或者其他东西。

.start_loader .iconfader {
    position:absolute;
    width: 200px;
    height: 200px;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

#load-icon1 {
    background: url(http://mydomain.com/loader-01.png) no-repeat center center;
    background-size: 200px 200px;
}
#load-icon2 {
    -webkit-animation-delay: -3s;
    background: url(http://mydomain.com/loader-02.png) no-repeat center center;
    background-size: 200px 200px;
}
#load-icon3 {
    -webkit-animation-delay: -2s;
    background: url(http://mydomain.com/loader-03.png) no-repeat center center;
    background-size: 200px 200px;
}
#load-icon4 {
    -webkit-animation-delay: -1s;
    background: url(http://mydomain.com/loader-03.png) no-repeat center center;
    background-size: 200px 200px;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    25% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

Answer 1

我在Codepen上做过这个。检查一下。

这不需要4个div。我们可以用CSS3

在单个div上执行此操作

http://cdpn.io/rFpmx

<强> CODE

<div class="loader anim-1"></div>
<div class="loader anim-2"></div>

<强> CSS

.loader {
  height: 80px;
  width: 80px;
  position: relative;
  margin: 100px auto;
}
.loader:after {
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 80px;
  width: 80px;
}
.loader.anim-1:after {
  -webkit-animation: fader 2.4s linear infinite;
}
.loader.anim-2:after {
  -webkit-animation: fader2 2.4s linear infinite;
}

@-webkit-keyframes fader {
  0%, 20%, 100% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/3/000/01f/210/0fedb27.jpg);
  }

  25%, 45% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/005/025/0d0/3ec916f.jpg);
  }

  50%, 70% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/000/143/350/1ca561e.jpg);
  }

  75%, 95% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/8/000/2cb/256/2f5ed8e.jpg);
  }
}
@-webkit-keyframes fader2 {
  0%, 100% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/3/000/01f/210/0fedb27.jpg);
  }

  25% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/005/025/0d0/3ec916f.jpg);
  }

  50% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/000/143/350/1ca561e.jpg);
  }

  75% {
    background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/8/000/2cb/256/2f5ed8e.jpg);
  }
}

CSS3图像旋转器

1 个答案: