CSS 刷新圖標可以為網站增添美觀和提升用戶體驗。這種圖標通常用來告訴用戶頁面正在加載、處理或者更新。本文將介紹如何使用 CSS 制作自己的刷新圖標。

.refresh-icon {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
animation: circle 1.5s ease-in-out infinite;
}
.refresh-icon:before,
.refresh-icon:after {
content: "";
position: absolute;
top: 0;
}
.refresh-icon:before {
width: 12px;
height: 12px;
border-width: 2px;
border-style: solid;
border-color: #fff transparent transparent #fff;
border-radius: 50%;
}
.refresh-icon:after {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
left: 50%;
transform: translate(-50%, -50%);
animation: dot 1.5s ease-in-out infinite;
}
@keyframes circle {
0% {
transform: rotate(0deg) scale(1);
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
50% {
transform: rotate(180deg) scale(0.6);
box-shadow: none;
}
100% {
transform: rotate(360deg) scale(1);
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
}
@keyframes dot {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}

以上是一個使用 CSS 制作的刷新圖標的例子。在示例中，我們先給定了該元素的寬度、高度和圓角屬性。同時，我們將元素定位為相對的，以便在繪制其內部元素時可以用到絕對定位，這樣我們就可以在內部容器里面創建圖標。我們還使用了 animation 屬性實現動畫效果，并分別為內部圓圈和外部圓圈分別創建了不同的 keyframes 動畫。