在網頁設計過程中，經常需要使用各種動畫效果來吸引用戶的關注，其中閃動圈是一種常見的特效效果。今天，我們來學習一下如何使用CSS來創建一個簡單的閃動圈。

.shining-circle {
width: 100px;
height: 100px;
border: 2px solid #fff;
border-radius: 50%; /*將正方形轉化為圓形*/
animation: blink 1.5s ease-in-out infinite; /*循環動畫*/
}
@keyframes blink {
0% {
opacity: 0;
transform: scale(0.5) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1) rotate(180deg);
}
100% {
opacity: 0;
transform: scale(0.5) rotate(360deg);
}
}

首先，我們需要創建一個大小為100x100像素的圓形div，并設置它的邊框為2像素的白色。我們使用border-radius屬性將正方形轉化為圓形。接下來，我們使用CSS3動畫來實現閃動效果。

在這個動畫的關鍵幀中，我們在0%時將圓形設為完全透明并縮小到它的一半大小，在50%時將其變為不透明并以180度旋轉，最終在100%時將其設為完全透明并縮小到其一半大小并360度旋轉。動畫運行的循環周期是1.5秒。

通過實現這些簡單的CSS代碼，我們成功地創建了一個簡單的閃動圈，用于吸引用戶的注意力并提高網頁的視覺效果。