本頁上方 niauwu 做的 banner 無限循環背景不錯吧!
讓我們來 DIY 做無限循環背景吧!
挑選圖片、編輯圖片
- 選擇一張要循環的圖片,例如一張寬 100px 的圖片。
- 用修圖軟體把圖片寬度改成三倍,例如新增一個 300px的圖片檔,之後把圖片按照順序排列,第一張 x=0,第二張 x=100,第三張 x=200,之後把第二張水平反轉。存檔之後就變成可以無限循環的圖片了。
上CSS
#infiniteBG {
width: 100%;
height: 80px;
background-image: url("https://niauwu.github.com/img/infiniteBackground.jpg");
background-position: 0px 0px;
background-repeat: repeat-x;
-webkit-animation: bgMove 10s linear infinite;
-moz-animation: bgMove 10s linear infinite;
-ms-animation: bgMove 10s linear infinite;
-o-animation: bgMove 10s linear infinite;
animation: bgMove 10s linear infinite;
}
@-webkit-keyframes bgMove {
from {background-position:0% 0%;}
to {background-position: 300px 0%;}
}
@-moz-keyframes bgMove {
from {background-position:0% 0%;}
to {background-position: 300px 0%;}
}
@-ms-keyframes bgMove {
from {background-position:0% 0%;}
to {background-position: 300px 0%;}
}
@keyframes bgMove {
from {background-position:0% 0%;}
to {background-position: 300px 0%;}
}
輸出結果