一個css3動態的loading動畫，齒輪轉動

admin發表於2017-02-20
CSSS3動畫
本章節分享一個css3實現的loadding動畫效果。和大都數loadding動畫不同，它使用齒輪咬合的效果來像使用者傳遞等待效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #fff;
}
 
#circleRound {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  box-shadow: rgba(255,255,255,0.3) 0 0 0 1000px;
}
 
.glyphicon {
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
 
#glyphicon1 {
  position: absolute;
  font-size: 79px;
  top: -15px;
  left: -2px;
  color: #fb8bb9;
  animation-name: cogRound;
}
 
#glyphicon2 {
  position: absolute;
  font-size: 60px;
  top: 54px;
  left: -4px;
  color: #94ddff;
  animation-name: cogRound2;
}
 
#glyphicon3 {
  position: absolute;
  font-size: 54px;
  top: 50px;
  left: 50px;
  color: #ffce5b;
  animation-name: cogRound;
}
 
.busyMask {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  box-shadow: inset rgba(0,0,0,0.4) 0 4px 4px 0, rgba(255,255,255,1) 0 0 3px 2px, rgba(255, 255, 255, 0.8) 0 0 0 1000px;
}
 
@keyframes cogRound {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(270deg);
  }
  100% {
     transform: rotate(360deg);
  }
}
@keyframes cogRound2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-270deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
</style>
</head>
<body>
<div class="loading" id="circleRound">
  <div class="busy">
    <span id="glyphicon1" class="glyphicon glyphicon-cog" aria-hidden="true"></span>
    <span id="glyphicon2" class="glyphicon glyphicon-cog" aria-hidden="true"></span>
    <span id="glyphicon3" class="glyphicon glyphicon-cog" aria-hidden="true"></span>
  </div>
  <div class="busyMask"></div>
  </div>
</body>
</html>

相關文章