CSS多張背景切換是一種讓網頁背景圖像在一定時間內自動切換的效果。這種效果會為網頁帶來更加生動的體驗,同時也能吸引訪問者的注意力。
.bg-img{ background-image: url("img1.jpg"), url("img2.jpg"), url("img3.jpg"); background-size: cover; background-repeat: no-repeat; animation: change-bg 10s infinite; } @keyframes change-bg{ 0% { background-image: url("img1.jpg"); } 50% { background-image: url("img2.jpg"); } 100% { background-image: url("img3.jpg"); } }
上面的代碼是一個簡單的例子,它會讓一個名為“bg-img”的元素的背景在10秒鐘內在三張圖片之間切換,切換順序為img1.jpg ->img2.jpg ->img3.jpg ->img1.jpg ->img2.jpg ……循環無限次。
這里需要注意的是,為了實現這個效果,我們需要做一些基本配置。首先,我們需要使用background-image屬性為元素添加背景圖片。同時,我們使用background-size屬性來調整背景圖片的大小,使用background-repeat屬性控制背景圖片的重復方式。還需要使用animation屬性來設置切換的時長和循環次數。最后,我們使用@keyframes關鍵字來定義動畫的細節。在@keyframes中,我們使用百分比來控制切換過程中每一個時刻的背景圖片。
通過這種簡單的方式,我們就能夠很容易地實現CSS多張背景切換的效果,在網頁設計中起到一定的點綴作用。
上一篇css多圖上傳預覽