今天抽空做了一個css3的輪播圖，都是用的最簡單的動畫舔株，這次練習(xí)的關(guān)鍵在于 所有的動畫時間都是一樣的，然后更具動畫過程中的百分比進(jìn)行滾動和其他的判斷载慈。
只檢測了google瀏覽器和火狐瀏覽器。
在火狐瀏覽器中有一點(diǎn)需要指出办铡，在我沒有設(shè)置動畫為100%時動畫是無效的琳要，比如:
[codesyntax lang="css"]
@keyframes sta1{
0%{
left: 0px;
}
10%{
left: 0px;
}
20%{
left: 0px;
}
30%{
left: -900px;
}
}
[/codesyntax]
上面無效秤茅，不能運(yùn)行
[codesyntax lang="css"]
@keyframes sta1{
0%{
left: 0px;
}
10%{
left: 0px;
}
20%{
left: 0px;
}
30%{
left: -900px;
}
100%{
left: -900px;
}
}
[/codesyntax]
可以運(yùn)行
這里只發(fā)現(xiàn)了滾動會有這樣的現(xiàn)象稚补，圖片放大沒有影響框喳。
附圖一張：
