CSS3實現的環形旋轉載入補全效果程式碼例項

admin發表於2017-02-19
CSSS3
本章節分享一段程式碼例項，它實現了環形旋轉載入效果。

這種效果在很多實際應用中都有使用，特別是需要一點時間等待功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
.spinner{
  width:70px;
  height:70px;
  position:relative;
  left:100px;
  top:100px;
  color:white;
}
.spinner .top, .spinner .bottom{
  width:70px;
  height:35px;
  position:relative;
  -webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0) scale(1.0, 1.0);
  overflow:hidden;
}
.spinner::before, .spinner .top::before, .spinner .bottom::before{
  content: '';
  width: 70px;
  height: 70px;
  display: inline-block;
  border-style: solid;
  border-top-color: #FFF;
  border-right-color: #FFF;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  border-width: 5px;
  box-sizing: border-box;
}
 
/* 使用spinner::before來覆蓋空隙*/
.spinner::before {
  position: absolute;
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotateZ(47deg);
  -webkit-animation: fix-gap 2s ease-in infinite;
}
.spinner .top::before {
  transform: rotateZ(-225deg);
  -webkit-animation: rotate-top 2s ease-in infinite;
  /*-webkit-animation-delay: 0.3s;*/
}
.spinner .bottom::before {
  border-bottom-color: #fff;
  border-top-color: transparent;
  position: relative;
  bottom: 35px;
  transform: rotateZ(-135deg);
  -webkit-animation: rotate-bottom 2s  ease-out infinite;
  /*-webkit-animation-delay: 0.3s;*/
}
 
@-webkit-keyframes fix-gap {
  49% {
    border-top-color: transparent;
  }
  50% { 
    border-top-color: white;
  }
  100% { 
    border-top-color: white; 
  }
}
 
@-webkit-keyframes rotate-top {
  50% { 
    transform: rotateZ(-45deg); 
  }
  100% {  
    transform: rotateZ(-45deg); 
  }
}
@-webkit-keyframes rotate-bottom {
  50% { 
    transform: rotateZ(-135deg);
  }
  100% {  
    transform: rotateZ(45deg); 
  }
}
body {
  background: rgb(235, 205, 86);
}
</style>
</head>
<body>
<div class="spinner">
  <div class="top"></div>
  <div class="bottom"></div>
</div>
</body>
</html>

相關文章