背景墻是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分,使用CSS3可以為背景墻添加一些新的效果,如移動(dòng)效果。下面我們將介紹如何使用CSS3實(shí)現(xiàn)背景墻移動(dòng)效果。
.background { background-image: url('example.jpg'); background-repeat: repeat-x; animation: slide 20s linear infinite; } @keyframes slide { 0% { background-position: 0px 0px; } 100% { background-position: -2000px 0px; } }
以上代碼實(shí)現(xiàn)了一個(gè)背景墻移動(dòng)的效果。首先,我們?yōu)楸尘皦υO(shè)置了一個(gè)圖片,然后對圖片進(jìn)行水平重復(fù)。接著,我們使用CSS3動(dòng)畫的關(guān)鍵字`animation`來給圖片添加移動(dòng)效果,動(dòng)畫名字為`slide`,時(shí)長為20秒,動(dòng)畫函數(shù)為線性,重復(fù)次數(shù)為無限。
接下來,我們進(jìn)入關(guān)鍵字`@keyframes`中,定義移動(dòng)的具體效果。在0%時(shí),圖片的初始位置為x方向的0px,y方向的0px;在100%時(shí),圖片的終止位置為x方向的-2000px,y方向的0px。通過類似于電影自動(dòng)播放的方式,我們就可以讓背景墻隨時(shí)間移動(dòng),達(dá)到一個(gè)不錯(cuò)的視覺效果。