CSS 背景圖左右移動是一種簡單又實用的效果,可以為網頁添加一些生動感和活力。下面介紹一些實現方法:
// 方法一:使用 CSS animation .bg { background-image: url('path/to/image.jpg'); animation: move 10s infinite alternate; } @keyframes move { from { background-position-x: 0; } to { background-position-x: 100%; } } // 方法二:使用 CSS transform .bg { background-image: url('path/to/image.jpg'); transform: translateX(-50%); animation: move 10s infinite alternate; } @keyframes move { 100% { transform: translateX(50%); } }
第一種方法使用了 CSS animation 屬性,定義了一個動畫序列,通過變化背景圖的橫坐標來實現左右移動的效果。在關鍵幀(from 和 to)中定義了背景圖的起始和結束位置。
第二種方法使用 CSS transform 屬性,先將背景圖左移 50% 的寬度,然后再使用 animation 屬性定義動畫序列,通過修改 transform 屬性的值來實現左右移動的效果。
以上兩種方法都可以實現背景圖的左右移動效果,根據實際需要選擇使用即可。
下一篇css背景圖怎么加鏈接