色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 圓形正在加載動畫

老白1年前8瀏覽0評論

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圓形加載動畫。