好玩的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动画

标签：ati   项目   动画   打开网页   com   blog   logs   css3   lin   

原文地址：http://www.cnblogs.com/ljc7878/p/7397818.html