css環形滾動_內容加載的環形滾動動畫效果

創建一個沒有背景的圓，然后聲明透明度為0.1的黑色邊框(看起來是灰色)，修改左側邊框顏色。此時會有一個靜態的看起來只有左邊框有顏色的空心圓。然后聲明一個該元素逆時針旋轉360度的動畫，並讓該動畫無限播放(infinite)即可。  

 

使用的css3 特性:

1. transform屬性的 rotate，共一個參數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述代碼作用是順時針旋轉45度。

2. animation ：實現到類似於 Loading 動畫的效果

 

代碼：

<div class="donut"></div>
<style>
@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}
</style>

新片場https://www.wode007.com/sites/73286.html 傲視網https://www.wode007.com/sites/73285.html

說明：使用半透明的border 對於整個元素，除了用作圓環加載指示器的一側。使用animation 旋轉元素。

 

效果如下：