創(chuàng)建一個(gè)沒有背景的圓，然后聲明透明度為0.1的黑色邊框(看起來是灰色),，修改左側(cè)邊框顏色。此時(shí)會(huì)有一個(gè)靜態(tài)的看起來只有左邊框有顏色的空心圓,。然后聲明一個(gè)該元素逆時(shí)針旋轉(zhuǎn)360度的動(dòng)畫,，并讓該動(dòng)畫無限播放(infinite)即可,。  

使用的css3 特性:

1. transform屬性的 rotate，共一個(gè)參數(shù)“角度”,，單位deg為度的意思,，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn),，上述代碼作用是順時(shí)針旋轉(zhuǎn)45度,。

2. animation ：實(shí)現(xiàn)到類似于 Loading 動(dòng)畫的效果

代碼：

<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>

新片場(chǎng)https://www./sites/73286.html 傲視網(wǎng)https://www./sites/73285.html

說明：使用半透明的border 對(duì)于整個(gè)元素，除了用作圓環(huán)加載指示器的一側(cè),。使用animation 旋轉(zhuǎn)元素,。

效果如下：