如何用CSS動(dòng)畫(huà)實(shí)現(xiàn)流暢的圖片連續(xù)播放效果？

css動(dòng)畫(huà)實(shí)現(xiàn)流暢圖片連續(xù)播放

許多應(yīng)用場(chǎng)景需要將圖片以類(lèi)似視頻播放的方式展示，例如圖片輪播、產(chǎn)品展示等。然而，直接用JavaScript逐張加載圖片容易出現(xiàn)加載速度跟不上播放速度，導(dǎo)致黑屏或卡頓。本文介紹一種利用css動(dòng)畫(huà)，實(shí)現(xiàn)流暢圖片連續(xù)播放的方法。

該方法的核心在于將多張圖片拼接成一張長(zhǎng)圖，然后用CSS的background-position屬性和@keyframes動(dòng)畫(huà)控制顯示區(qū)域，模擬視頻播放效果。

假設(shè)所有圖片尺寸相同，例如都是500×300像素。將三張圖片水平拼接成一張1500×300像素的長(zhǎng)圖。 CSS代碼如下：

.container {   width: 500px;   height: 300px;   background: url("拼接后的圖片.jpg") left / auto 100% no-repeat;   animation: play 3s steps(3, start) 0s infinite; /* 3s為播放時(shí)長(zhǎng)，3為圖片數(shù)量 */ }  @keyframes play {   0% { background-position: 0 0; } /* 第1張 */   33.3% { background-position: -500px 0; } /* 第2張 */   66.7% { background-position: -1000px 0; } /* 第3張 */   100% { background-position: 0 0; } /* 回到第1張 */ }

.container定義了圖片容器大小，background屬性設(shè)置拼接好的圖片為背景，并用background-position控制顯示區(qū)域。@keyframes play定義動(dòng)畫(huà)，steps(3, start)確保圖片切換分步進(jìn)行，infinite表示無(wú)限循環(huán)。播放時(shí)長(zhǎng)(3s)需根據(jù)圖片數(shù)量和所需播放速度調(diào)整。background-position的值根據(jù)圖片數(shù)量和尺寸計(jì)算，確保每張圖片完整顯示。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

此方法預(yù)先加載所有圖片到一張長(zhǎng)圖中，避免了逐張加載的延遲，從而實(shí)現(xiàn)流暢的圖片連續(xù)播放效果。