CSS圖片循環(huán)放大縮小是一種非常有趣的效果，可以為網(wǎng)頁增添不少美感。下面我們就來學習一下如何實現(xiàn)這個效果。

img {
width: 200px; /* 圖片原始大小 */
height: 200px;
animation-name: zoomInOut; /* 動畫名稱 */
animation-duration: 6s; /* 動畫時長 */
animation-timing-function: linear; /* 動畫公式 */
animation-iteration-count: infinite; /* 動畫循環(huán)次數(shù) */
}
@keyframes zoomInOut {
0% {
transform: scale(1); /* 圖片初始大小 */
}
50% {
transform: scale(1.2); /* 圖片放大1.2倍 */
}
100% {
transform: scale(1); /* 圖片恢復原始大小 */
}
}

解釋一下上面的代碼：

首先，我們設(shè)置了圖片的原始大小，并通過animation-name屬性來指定動畫的名稱為zoomInOut，animation-duration屬性指定了動畫持續(xù)的時間為6秒。

接下來，我們定義了一個名為zoomInOut的動畫，其中0%表示動畫的開始狀態(tài)，50%表示動畫執(zhí)行到一半的狀態(tài)，100%表示動畫的結(jié)束狀態(tài)。在0%和100%的狀態(tài)中，transform的scale屬性都是1，即圖片的原始大小，而在50%的狀態(tài)中，transform的scale屬性為1.2，即圖片放大1.2倍。

最后，我們通過animation-iteration-count屬性將動畫設(shè)置為無限循環(huán)，即圖片會不停地縮放。

通過上面的代碼，我們就可以實現(xiàn)一個有趣的CSS圖片循環(huán)放大縮小效果了。