CSS 循環放大是一種非常實用的技巧，可以實現一種漸進式瀏覽效果，讓用戶更好地體驗我們的網站。下面我們來介紹一下如何使用 CSS 循環放大。

/* 定義圖片效果 */
img {
transition: all .5s ease-in-out;
}
/* 定義初始狀態 */
img.init {
transform: scale(1);
}
/* 定義放大狀態 */
img.zoom {
transform: scale(2);
}

如上述代碼所示，我們先默認設置圖片初始狀態為 1（即平常的大小），然后設定圖片被鼠標點擊時的狀態為 2（即放大兩倍）。

/* 設置循環動畫 */
@keyframes loop {
25% {
transform: scale(1.5);
}
50% {
transform: scale(2);
}
75% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/* 給圖片添加動畫特效 */
img:hover {
animation: loop 2s linear infinite;
}

然后，我們定義了一個名為 loop 的動畫，其中 25% 和 75% 分別放大 1.5 倍，50% 時放大 2 倍，并在 100% 時回到初始狀態。最后，我們添加了一個 :hover 選擇器，使鼠標懸浮在圖片上時動畫生效。

這樣，我們就實現了 CSS 循環放大的效果。歡迎大家在實際應用中嘗試，相信一定會帶來意想不到的驚喜。