是一個純CSS實現的Loading特效，它由5個圓形組成，每個圓形在不同的時間點開始旋轉，并在不同的速度上旋轉，創造出一個動態而又和諧的效果。該特效通過使用CSS3動畫和漸變屬性實現，代碼簡潔，易于理解和修改。該特效可用于各種網站和應用程序中，為用戶提供更好的等待體驗。

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

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

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

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

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

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

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

是Web開發和CSS的新手嗎？你是否想過如何在互聯網上看到那些漂亮的形狀？別再奇怪了。你來對地方了。

下面，我將解釋使用CSS創建形狀的基本知識。還有很多要告訴你關于這個話題！因此，我不會涵蓋所有（絕大部分）工具和形狀，但這應該使你基本了解如何使用CSS創建形狀，并且創建文字環繞圖形的方式方法。

有些形狀比其他形狀需要更多的“技巧和竅門”。使用CSS創建形狀通常是使用寬度，高度，頂部，右側，左側，邊框，底部，變換和偽元素（例如：before和：after）的組合。我們還具有更現代的CSS屬性，可使用諸如shape-outside和clip-path之類的形狀來創建形狀，這些內容我將在后面寫出來。