网站加载中loading..样式二代码介绍

css代码：

body {
  background:#1b1d1f;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  padding:0;
  margin:0
}
.loader-wrapper {
  width:148px;
  height:100px;
  position:absolute
}
.loader {
  width:148px;
  height:100px;
  top:0;
  left:0;
  position:absolute
}
.loader:after {
  content:"";
  top:auto;
  position:absolute;
  display:block;
  animation:shadow 1.2s infinite linear;
  -moz-animation:shadow 1.2s infinite linear;
  bottom:0em;
  left:0;
  height:.25em;
  width:1em;
  border-radius:50%;
  background-color:rgba(100,100,100,.5);
  opacity:0.3
}
.roller,.roller:last-child {
  width:70px;
  height:70px;
  position:absolute;
  top:0;
  left:0;
  -webkit-animation:rollercoaster 1.2s infinite linear;
  -webkit-transform:rotate(135deg);
  -moz-animation:rollercoaster 1.2s infinite linear;
  -moz-transform:rotate(135deg);
  animation:rollercoaster 1.2s infinite linear;
  transform:rotate(135deg)
}
.roller:last-child {
  left:auto;
  right:0;
  -webkit-transform:rotate(-45deg);
  -webkit-animation:rollercoaster2 1.2s infinite linear;
  -moz-transform:rotate(-45deg);
  -moz-animation:rollercoaster2 1.2s infinite linear;
  transform:rotate(-45deg);
  animation:rollercoaster2 1.2s infinite linear
}
.roller:before,.roller:last-child:before {
  content:"";
  display:block;
  width:15px;
  height:15px;
  background:#f1404b;
  border-radius:50%
}
.io-black-mode .loader:after {
  background-color:rgba(130,130,130,.5)
}
@-webkit-keyframes rollercoaster {
  0% {
  -webkit-transform:rotate(135deg)
}
8% {
  -webkit-transform:rotate(240deg)
}
20% {
  -webkit-transform:rotate(300deg)
}
40% {
  -webkit-transform:rotate(380deg)
}
45% {
  -webkit-transform:rotate(440deg)
}
50% {
  -webkit-transform:rotate(495deg);
  opacity:1
}
50.1% {
  -webkit-transform:rotate(495deg);
  opacity:0
}
100% {
  -webkit-transform:rotate(495deg);
  opacity:0
}
}@-webkit-keyframes rollercoaster2 {
  0% {
  opacity:0
}
49.9% {
  opacity:0
}
50% {
  opacity:1;
  -webkit-transform:rotate(-45deg)
}
58% {
  -webkit-transform:rotate(-160deg)
}
70% {
  -webkit-transform:rotate(-240deg)
}
80% {
  -webkit-transform:rotate(-300deg)
}
90% {
  -webkit-transform:rotate(-340deg)
}
100% {
  -webkit-transform:rotate(-405deg)
}
}@-webkit-keyframes shadow {
  0% {
  opacity:.3;
  -webkit-transform:translateX(65px) scale(0.5,0.5)
}
8% {
  -webkit-transform:translateX(30px) scale(2,2)
}
13% {
  -webkit-transform:translateX(0px) scale(1.3,1.3)
}
30% {
  -webkit-transform:translateX(-15px) scale(0.5,0.5);
  opacity:0.1
}
50% {
  -webkit-transform:translateX(60px) scale(1.2,1.2);
  opacity:0.3
}
60% {
  -webkit-transform:translateX(130px) scale(2,2);
  opacity:0.05
}
65% {
  -webkit-transform:translateX(145px) scale(1.2,1.2)
}
80% {
  -webkit-transform:translateX(120px) scale(0.5,0.5);
  opacity:0.1
}
90% {
  -webkit-transform:translateX(80px) scale(0.8,0.8)
}
100% {
  -webkit-transform:translateX(60px);
  opacity:0.3
}
}@-moz-keyframes rollercoaster {
  0% {
  -moz-transform:rotate(135deg)
}
8% {
  -moz-transform:rotate(240deg)
}
20% {
  -moz-transform:rotate(300deg)
}
40% {
  -moz-transform:rotate(380deg)
}
45% {
  -moz-transform:rotate(440deg)
}
50% {
  -moz-transform:rotate(495deg);
  opacity:1
}
50.1% {
  -moz-transform:rotate(495deg);
  opacity:0
}
100% {
  -moz-transform:rotate(495deg);
  opacity:0
}
}@-moz-keyframes rollercoaster2 {
  0% {
  opacity:0
}
49.9% {
  opacity:0
}
50% {
  opacity:1;
  -moz-transform:rotate(-45deg)
}
58% {
  -moz-transform:rotate(-160deg)
}
70% {
  -moz-transform:rotate(-240deg)
}
80% {
  -moz-transform:rotate(-300deg)
}
90% {
  -moz-transform:rotate(-340deg)
}
100% {
  -moz-transform:rotate(-405deg)
}
}@-moz-keyframes shadow {
  0% {
  opacity:.3;
  -moz-transform:translateX(65px) scale(0.5,0.5)
}
8% {
  -moz-transform:translateX(30px) scale(2,2)
}
13% {
  -moz-transform:translateX(0px) scale(1.3,1.3)
}
30% {
  -moz-transform:translateX(-15px) scale(0.5,0.5);
  opacity:0.1
}
50% {
  -moz-transform:translateX(60px) scale(1.2,1.2);
  opacity:0.3
}
60% {
  -moz-transform:translateX(130px) scale(2,2);
  opacity:0.05
}
65% {
  -moz-transform:translateX(145px) scale(1.2,1.2)
}
80% {
  -moz-transform:translateX(120px) scale(0.5,0.5);
  opacity:0.1
}
90% {
  -moz-transform:translateX(80px) scale(0.8,0.8)
}
100% {
  -moz-transform:translateX(60px);
  opacity:0.3
}
}@keyframes rollercoaster {
  0% {
  transform:rotate(135deg)
}
8% {
  transform:rotate(240deg)
}
20% {
  transform:rotate(300deg)
}
40% {
  transform:rotate(380deg)
}
45% {
  transform:rotate(440deg)
}
50% {
  transform:rotate(495deg);
  opacity:1
}
50.1% {
  transform:rotate(495deg);
  opacity:0
}
100% {
  transform:rotate(495deg);
  opacity:0
}
}@keyframes rollercoaster2 {
  0% {
  opacity:0
}
49.9% {
  opacity:0
}
50% {
  opacity:1;
  transform:rotate(-45deg)
}
58% {
  transform:rotate(-160deg)
}
70% {
  transform:rotate(-240deg)
}
80% {
  transform:rotate(-300deg)
}
90% {
  transform:rotate(-340deg)
}
100% {
  transform:rotate(-405deg)
}
}@keyframes shadow {
  0% {
  opacity:.3;
  transform:translateX(65px) scale(0.5,0.5)
}
8% {
  transform:translateX(30px) scale(2,2)
}
13% {
  transform:translateX(0px) scale(1.3,1.3)
}
30% {
  transform:translateX(-15px) scale(0.5,0.5);
  opacity:0.1
}
50% {
  transform:translateX(60px) scale(1.2,1.2);
  opacity:0.3
}
60% {
  transform:translateX(130px) scale(2,2);
  opacity:0.05
}
65% {
  transform:translateX(145px) scale(1.2,1.2)
}
80% {
  transform:translateX(120px) scale(0.5,0.5);
  opacity:0.1
}
90% {
  transform:translateX(80px) scale(0.8,0.8)
}
100% {
  transform:translateX(60px);
  opacity:0.3
}
}#loader2:after {
  -webkit-animation-delay:0.15s;
  animation-delay:0.15s
}
#loader2 .roller {
  -webkit-animation-delay:0.15s;
  animation-delay:0.15s
}
#loader3:after {
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s
}
#loader3 .roller {
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s
}

html代码：

<div id="loading">
  <div class="loader-wrapper">
    <div class="loader">
        <div class="roller"></div>
        <div class="roller"></div>
    </div>
    <div id="loader2" class="loader">
        <div class="roller"></div>
        <div class="roller"></div>
    </div>
    <div id="loader3" class="loader">
        <div class="roller"></div>
        <div class="roller"></div>
    </div>
  </div>
</div> 

点击查看效果

本文链接：http://so.lmcjl.com/news/10104/