css3實現的loadding載入動畫效果

admin發表於2017-03-05
CSSS3動畫

分享一段程式碼例項，它實現了loadding載入動畫效果。

提供了3種效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  width:100%;
  padding:3%;
  box-sizing:border-box;
  overflow:hidden
}
.box .loader{
  width:30%;
  float:left;
  height:200px;
  margin-right:3%;
  border:1px #ccc solid;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center
}
@-webkit-keyframes loading-1{
  0%{transform:rotate(0)}
  50%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}
.loading-1{
  width:35px;
  height:35px;
  position:relative
}
.loading-1 i{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:linear-gradient(transparent 0,transparent 70%,#333 30%,#333 100%);
  -webkit-animation:loading-1 .6s linear 0s infinite
}
@-webkit-keyframes loading-2{
  0%{transform:scaleY(1)}
  50%{transform:scaleY(.4)}
  100%{transform:scaleY(1)}
}
.loading-2 i{
  display:inline-block;
  width:4px;
  height:35px;
  border-radius:2px;
  margin:0 2px;
  background-color:#333
}
.loading-2 i:nth-child(1){-webkit-animation:loading-2 1s ease-in .1s infinite}
.loading-2 i:nth-child(2){-webkit-animation:loading-2 1s ease-in .2s infinite}
.loading-2 i:nth-child(3){-webkit-animation:loading-2 1s ease-in .3s infinite}
.loading-2 i:nth-child(4){-webkit-animation:loading-2 1s ease-in .4s infinite}
.loading-2 i:nth-child(5){-webkit-animation:loading-2 1s ease-in .5s infinite}
@-webkit-keyframes loading-3{
  50%{transform:scale(.4);opacity:.3}
  100%{transform:scale(1);opacity:1}
}
.loading-3{position:relative}
.loading-3 i{
  display:block;
  width:15px;
  height:15px;
  border-radius:50%;
  background-color:#333;
  position:absolute
}
.loading-3 i:nth-child(1){
  top:25px;
  left:0;
  -webkit-animation:loading-3 1s ease 0s infinite
}
.loading-3 i:nth-child(2){
  top:17px;
  left:17px;
  -webkit-animation:loading-3 1s ease -.12s infinite
}
.loading-3 i:nth-child(3){
  top:0;
  left:25px;
  -webkit-animation:loading-3 1s ease -.24s infinite
}
.loading-3 i:nth-child(4){
  top:-17px;
  left:17px;
  -webkit-animation:loading-3 1s ease -.36s infinite
}
.loading-3 i:nth-child(5){
  top:-25px;
  left:0;
  -webkit-animation:loading-3 1s ease -.48s infinite
}
.loading-3 i:nth-child(6){
  top:-17px;
  left:-17px;
  -webkit-animation:loading-3 1s ease -.6s infinite
}
.loading-3 i:nth-child(7){
  top:0;
  left:-25px;
  -webkit-animation:loading-3 1s ease -.72s infinite
}
.loading-3 i:nth-child(8){
  top:17px;
  left:-17px;
  -webkit-animation:loading-3 1s ease -.84s infinite
}
</style>
</head>
<body>
<div class="box">
  <div class="loader">
    <div class="loading-1">
          <i></i>
        </div>
  </div>
  <div class="loader">
    <div class="loading-2">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
  </div>
  <div class="loader">
    <div class="loading-3">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
  </div>
</div>
</body>
</html>

相關文章