色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css背景移動動畫效果圖

黃萬煥1年前5瀏覽0評論

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)”,這樣就實現了背景圖片的循環移動效果。