CSS讓背景圖滾動(dòng)的方法

在CSS中，我們可以通過(guò)設(shè)置背景圖像的animation屬性來(lái)實(shí)現(xiàn)背景圖的滾動(dòng)效果，這個(gè)屬性允許我們定義動(dòng)畫的名稱、持續(xù)時(shí)間、延遲時(shí)間、重復(fù)次數(shù)等參數(shù)。

我們需要?jiǎng)?chuàng)建一個(gè)CSS動(dòng)畫，用于移動(dòng)背景圖像，我們可以創(chuàng)建一個(gè)名為scroll-bg的動(dòng)畫，持續(xù)時(shí)間為5分鐘，延遲時(shí)間為0，重復(fù)次數(shù)為無(wú)限次。

@keyframes scroll-bg {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}
body {
  background-image: url('path/to/your/image.png');
  background-repeat: no-repeat;
  animation: scroll-bg 5m 0s infinite;
}

在這個(gè)例子中，我們使用了@keyframes規(guī)則來(lái)定義動(dòng)畫的關(guān)鍵幀。0%表示動(dòng)畫開始時(shí)背景圖像的background-position位置，100%表示動(dòng)畫結(jié)束時(shí)背景圖像的background-position位置，我們將這個(gè)動(dòng)畫應(yīng)用到body元素的background-image上，并設(shè)置background-repeat為no-repeat，以確保背景圖像不會(huì)重復(fù)顯示，我們通過(guò)animation屬性將動(dòng)畫應(yīng)用到元素上，并設(shè)置持續(xù)時(shí)間、延遲時(shí)間和重復(fù)次數(shù)等參數(shù)。

通過(guò)這種方式，我們可以輕松地讓背景圖像在網(wǎng)頁(yè)上滾動(dòng)起來(lái)，增加網(wǎng)頁(yè)的動(dòng)感和吸引力。