CSS3 loadding旋轉等待動畫

admin發表於2018-06-08
CSSS3動畫

本章節分享一段程式碼例項，它實現了載入過程中旋轉等待效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.wrap{
  width:64px;
  height:64px;
  position:relative;
}
.outer{
  position:absolute;
  width:100%;
  height:100%;
  animation: spin 800ms infinite linear;
}
.inner, .inner2{
  position:absolute;
  width: 38px;
  height:38px;
  border-radius:40px;
  overflow:hidden;
  left: 13px;top:13px;
}
.inner{
  opacity:1;
  background-color:#89abdd;
  animation:second-half-hide 1.6s steps(1, end) infinite;
}
.inner2{
  opacity:0;
  background-color:#4b86db;
  animation:second-half-show 1.6s steps(1, end) infinite;
}
 .spiner, .filler, .masker{
   position:absolute;
   width:50%;
   height:100%;
 }
.spiner{
  border-radius:40px 0 0 40px;
  background-color:#4b86db;
  transform-origin:right center;
  animation:spin 800ms infinite linear;
  left:0;
  top:0;
}
.filler{
  border-radius:0 40px 40px 0;
  background-color:#4b86db;
  animation:second-half-hide 800ms steps(1, end) infinite;
  left:50%;
  top:0;
  opacity:1;
}
.masker{
  border-radius:40px 0 0 40px;
  background-color:#89abdd;
  animation:second-half-show 800ms steps(1, end) infinite;
  left:0;
  top:0;
  opacity:0;
}
.inner2 .spiner, .inner2 .filler{background-color: #89abdd;}
.inner2 .masker {background-color:#4b86db;}
 
@keyframes spin{
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@keyframes second-half-hide {
  0% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes second-half-show {
  0%{opacity:0;}
  50%, 100% {opacity:1;}
}
</style>
</head>  
<body>
<div class="wrap">
  <div class="outer"></div>
  <div class="inner">
    <div class="spiner"></div>
    <div class="filler"></div>
    <div class="masker"></div>
  </div>
  <div class="inner2">
    <div class="spiner"></div>
    <div class="filler"></div>
    <div class="masker"></div>
  </div>
</div>
</body> 
</html>

相關文章