CSS圓形正在加載動畫是網站設計中常見的一種效果。通過使用CSS樣式表,我們可以輕松地創建一個美觀的、動態的加載動畫,用于頁面的等待狀態。
.loader { border: 8px solid rgba(0, 0, 0, 0.1); /* 加載動畫邊框 */ border-left-color: #7983ff; /* 加載動畫顏色 */ border-radius: 50%; /* 將方形邊框變成圓形 */ animation: spin 1s ease infinite; /* 動畫效果 */ width: 50px; height: 50px; } @keyframes spin { to { transform: rotate(360deg); /* 完整旋轉一圈 */ } }
以上代碼是一個簡單的CSS圓形加載動畫示例。由于邊框的顏色設置了為透明度為0.1的黑色,使得整個動畫產生了一個淺灰色的外圍邊框效果。
其中,border-radius屬性的值為50%可以將原本的方形邊框變成完整的圓形邊框。接下來是關鍵的動畫效果部分。
通過keyframes關鍵字,我們可以在CSS樣式表中定義一個動畫規則。spin是我們自己定義的動畫名稱,to則表示動畫的最終狀態。
在此動畫規則中,我們使用transform屬性來制造逐幀間的變化效果,從而產生了一個旋轉動畫效果。這里的rotate(360deg)表示完整旋轉一圈,0deg則表示不旋轉。
最后,我們將這個動畫規則使用animation屬性綁定到.loader選擇器上,并設置了無限循環、持續時間為1秒的動畫效果。width和height屬性則控制了這個圓形加載動畫的大小。
通過使用這樣簡單的代碼,我們可以輕松創建出一個美觀的、具有動態效果的CSS圓形加載動畫。
上一篇css 元素設置為透明
下一篇java 借口和抽象類