天給大家帶來是四種顏色的加載動畫效果。大家可以仔細看到這是四個小點，點進行圓形的環繞，三百六十度的。看一下代碼區域，我用開發工具是hplx開發unif的。

·首先看一下威武士圖容器，里面包含svg圖形元素，里面又包含了四個圓形，圓形a、圓形b、圓形c、圓形d等。大家可以看我這注釋就應該看得明白，我很寫的很詳細。看效果去就知道一共是四個圓，大家可以發現沒有，每個點都有自己運動的軌跡。

·下面看一下csspro，首先是背景和整體的效果。下面就是縮小svg元素，已經就把它給縮小了，原本是一個圓，進行六六的。大家可以看一下，在停收小圓，看起來是個小圓。

·進行所有圓環動畫的類名任a，大家可以看到a圓的關鍵幀過渡的效果，零六百六，負百分之四十到百分之九十等。這個是第一個，a點也是個圓形的動畫。

·設置了a的顏色，紅色在跳，下面就是b的顏色、c的顏色、d的顏色。

前面給大家講了a的動畫的關鍵幀，大家看到這是b的幾乎就是相同的，只是大小和旋轉的軌跡是不一樣的。其實很簡單的，四個圓形分別設置成不同的顏色，每個有一個獨立的運動軌跡就可以完成了。

喜歡的可以點贊收藏一下，也可以自己動手去寫。如果想要原代碼的可以找我嘮嗑進行獲取。今天的css樣式就講到這了。

近在做一小程序，看有的APP上表示完善度的進度環不錯，想在小程序和網站上實現，又想盡量不增加加載時間，這里弄了個純CSS的，在小程序和網站上都跑通了，參考了網上的一些個例子，這里總結一下

HTML:

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(--9deg);"></div><!--9deg 從左到右數 -135到45，一共180度-->

</div>

<div class="text">7<br>完善度</div>

</div>

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(9deg);"></div>

<!--從左到右讀數 -135到45，一共180度-->

</div>

<div class="text">8<br>完善度</div>

</div>

CSS:

.blockOut0 { width: 40px; height: 40px; position: relative; overflow:hidden; margin:20px auto}

.block { width: 40px; height: 40px; border-left:4px solid #f60; border-top:4px solid #f60; border-right:4px solid #ccc; border-bottom:4px solid #ccc; border-radius: 50%; box-sizing: border-box;}

.blockOut { width: 40px; height:20px; overflow: hidden;}

.text { text-align: center; top: 8px; position: absolute; width: 100%; color:#f60; font-size:9px}