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

css代码：

body {
  background:#1b1d1f;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  padding:0;
  margin:0
}
.loader {
  width:130px;
  height:170px;
  position:relative
}
.loader::before,.loader::after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  bottom:30px;
  left:15px;
  z-index:1;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-bottom:20px solid rgba(107,122,131,.15);
  transform:scale(0);
  transition:all 0.2s ease
}
.loader::after {
  border-right:15px solid transparent;
  border-bottom:20px solid rgba(102,114,121,.2)
}
.loader .getting-there {
  width:120%;
  text-align:center;
  position:absolute;
  bottom:0;
  left:-7%;
  font-family:"Lato";
  font-size:12px;
  letter-spacing:2px;
  color:#555
}
.loader .binary {
  width:100%;
  height:140px;
  display:block;
  color:#555;
  position:absolute;
  top:0;
  left:15px;
  z-index:2;
  overflow:hidden
}
.loader .binary::before,.loader .binary::after {
  font-family:"Lato";
  font-size:24px;
  position:absolute;
  top:0;
  left:0;
  opacity:0
}
.loader .binary:nth-child(1)::before {
  content:"0";
  -webkit-animation:a 1.1s linear infinite;
  animation:a 1.1s linear infinite
}
.loader .binary:nth-child(1)::after {
  content:"0";
  -webkit-animation:b 1.3s linear infinite;
  animation:b 1.3s linear infinite
}
.loader .binary:nth-child(2)::before {
  content:"1";
  -webkit-animation:c 0.9s linear infinite;
  animation:c 0.9s linear infinite
}
.loader .binary:nth-child(2)::after {
  content:"1";
  -webkit-animation:d 0.7s linear infinite;
  animation:d 0.7s linear infinite
}
.loader.JS_on::before,.loader.JS_on::after {
  transform:scale(1)
}
@-webkit-keyframes a {
  0% {
  transform:translate(30px,0) rotate(30deg);
  opacity:0
}
100% {
  transform:translate(30px,150px) rotate(-50deg);
  opacity:1
}
}@keyframes a {
  0% {
  transform:translate(30px,0) rotate(30deg);
  opacity:0
}
100% {
  transform:translate(30px,150px) rotate(-50deg);
  opacity:1
}
}@-webkit-keyframes b {
  0% {
  transform:translate(50px,0) rotate(-40deg);
  opacity:0
}
100% {
  transform:translate(40px,150px) rotate(80deg);
  opacity:1
}
}@keyframes b {
  0% {
  transform:translate(50px,0) rotate(-40deg);
  opacity:0
}
100% {
  transform:translate(40px,150px) rotate(80deg);
  opacity:1
}
}@-webkit-keyframes c {
  0% {
  transform:translate(70px,0) rotate(10deg);
  opacity:0
}
100% {
  transform:translate(60px,150px) rotate(70deg);
  opacity:1
}
}@keyframes c {
  0% {
  transform:translate(70px,0) rotate(10deg);
  opacity:0
}
100% {
  transform:translate(60px,150px) rotate(70deg);
  opacity:1
}
}@-webkit-keyframes d {
  0% {
  transform:translate(30px,0) rotate(-50deg);
  opacity:0
}
100% {
  transform:translate(45px,150px) rotate(30deg);
  opacity:1
}
}@keyframes d {
  0% {
  transform:translate(30px,0) rotate(-50deg);
  opacity:0
}
100% {
  transform:translate(45px,150px) rotate(30deg);
  opacity:1
}
}
.io-black-mode .loader .getting-there,.io-black-mode .loader .binary {
  color:#bbb
}

html代码：

<div id="loading">
  <div class="loader JS_on">
  <span class="binary"></span>
  <span class="binary"></span>
  <span class="getting-there">LOADING STUFF...</span>
  </div>
</div> 

点击查看效果

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