好玩的css3動畫

標籤：ati   項目   動畫   開啟網頁   com   blog   logs   css3   lin   

我們在做項目時難免要用表徵圖的圖片，而圖片用多則會影響開啟網頁的載入速度，如果能把多個表徵圖集合到一張圖片上，再用css的樣式顯示你所需要的圖片，那麼載入速度自然就加快了，同時也提高了使用者的體驗度

過程如下

這樣的一張圖

實現下面的效果，便以移動的方式來展現

代碼如下

b標籤中給背景圖

css樣式

#img-a {
animation: img-a 1s linear;
animation-fill-mode:forwards;
}
#img-a b {

}
#img-b {
position: absolute;
left: 107px;

animation: img-b 1s linear;
animation-fill-mode:forwards;
}
#img-b b {
background-position: -174px;
}

#img-c {
position: absolute;
left: 210px;
animation: img-c 1s linear;
animation-fill-mode:forwards;
}
#img-c b {
background-position: -348px;
}

#img-d {
position: absolute;
left: 300px;
animation: img-d 1s linear;
animation-fill-mode:forwards;
}
#img-d b {
background-position: -522px;
}

#img-e {
position: absolute;
left: 400px;
animation: img-e 1s linear;
animation-fill-mode:forwards;
}
#img-e b {
background-position: -697px;
}

 這樣就實現了

 

好玩的css3動畫