CSS背景移動動畫是網頁設計中常用的一種效果。通過CSS編寫代碼,可以實現背景圖片在網頁中的移動效果,增強網頁的美觀性和互動性。下面是一個簡單的CSS背景移動動畫的效果圖。
.container { width: 100%; height: 500px; background: url("bg.jpg") no-repeat center center fixed; background-size: cover; position: relative; overflow: hidden; } @keyframes move-bg { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .container::before { content: ""; width: 200%; height: 100%; background: url("bg.jpg") no-repeat center center fixed; background-size: cover; position: absolute; top: 0; left: 0; animation: move-bg 60s linear infinite; }
以上代碼中,首先我們設置一個容器(container)的 div,作為背景容器,并設置該容器的背景圖片(bg.jpg),并設置為居中顯示。接著設置該容器的寬度(width)和高度(height),并將其定位(position)為相對(relative)。我們還將其 overflow 屬性設為 hidden,以便剪裁容器的四個邊緣。
然后,我們使用 CSS 動畫關鍵幀(@keyframes)規則來定義背景圖片的移動效果。我們將動畫名字設為 move-bg,并設置移動方向為向左平移(translateX)。在動畫開始時,我們將其初始位置設置為 0%,在動畫結束時將其位置設置為 -50%,這樣就使得背景圖片向左移動了 50% 容器的寬度。
最后,在容器的偽元素(::before)中添加背景圖片(bg.jpg)并設置其寬度(width)為 200%。通過這個偽元素的添加,我們可以實現背景圖片不斷循環移動的效果。最后,我們將該偽元素的動畫屬性(animation)設置為 move-bg,并設置其循環次數為“無窮大(infinite)”,這樣就實現了背景圖片的循環移動效果。
下一篇json怎么轉譯