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

.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;
}
}

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