CSS 註解要好好註解不然會有 Bug 喔

錯誤註解

1. 在 ; 後註解 //
2. 註解後 // 沒有於列末輸入 ;

display: table; //我是表格

//合併邊緣
border-collapse: collapse; 

正確註解

//我是表格;
display: table; 

//合併邊緣;
border-collapse: collapse; 

本頁上方 niauwu 做的 banner 無限循環背景不錯吧!
讓我們來 DIY 做無限循環背景吧！

挑選圖片、編輯圖片

1. 選擇一張要循環的圖片，例如一張寬 100px 的圖片。
2. 用修圖軟體把圖片寬度改成三倍，例如新增一個 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%;}
}

輸出結果