CSS Sprite CSS雪碧图应用实例

CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

CSS 雪碧图技术不是什么新东西，在网页应用中已经有几年了，现在的网页开发在图标图片的应用上已经趋向于使用字体图标，这是一种比CSS雪碧图技术更优雅的图标应用方式。

一下是两张CSS Sprite样图：

在网站中的导航最常见最明显，一些地方的零碎小图标也多使用。 CSS知识点： background-imagebackgorund-position 特点：

相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。一般情况下，你需要保存为PNG-24的文件格式。可以设计出丰富多彩的颜色体表。难点：

你需预先确定每个小图标的大小注意小图标与小图标之间的距离细心、耐心

PNG-24的图片格式：PNG-24可减少毛边。

background-position 索引值

应用实例：仿某商城分类导航效果图如下：

首先，创建基本的HTML结构 HTML：

效果如下：

还没有样式，我们为他添加一些基本的样式 CSS：

ul{list-style: none;margin: 0; padding: 0; }.sprite{margin: 10px auto;width: 206px;border: 1px solid #b51600;}.sprite li{cursor: pointer;height: 42px;width: 206px;background-color: #b51600;border-bottom: 1px solid #911001;border-top: 1px solid #c11e08;}.sprite li a {color: #fff;line-height: 42px;font-size: 14px;}

效果如下：

接下来我们为li下的s标签添加图和样式： CSS：

.sprite li s{height: 40px;width: 24px;display: block;margin-left: 10px;margin-right: 8px;float: left;background-image: url("../images/s-icon.png");}.sprite li:hover{background-color: #fff;border-color: #fff}.sprite li:hover a{color: #b51600;}.sprite li:hover s{}

效果如下：

通过前面介绍的background-position 索引值，用JS统一创建定位坐标，并添加鼠标滑动切换效果： JavaScript：

$(function(){var iconH = $(".sprite").find("s").height(),triggerLi = $(".sprite").children("li");//console.log(iconH);triggerLi.each(function(){var $this = $(this),$index = $this.index();//console.log($index)//console.log(iconH*$index);$this.children("s").css("background-position","0 -"+ iconH*$index +"px")$this.hover(function(){// 鼠标移入 $this.children("s").css("background-position","-24px -"+ iconH*$index +"px")},function(){// 鼠标移出 $this.children("s").css("background-position","0 -"+ iconH*$index +"px")});}); //当前页面属于某个功能时，点亮相应菜单项，这里通过地址参数判断，实际项目中应该从后台读取标志var $cat = parseInt(getQueryString("cat"));var poistions = "-24px -"+ iconH*($cat-1) +"px";triggerLi.eq($cat-1).css({"background-color":"#FFF"}).find("a").css("color","red");triggerLi.eq($cat-1).find("s").css({"background-position":poistions});});// 获取URL参数function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;}

这样我们就做好了这个导航效果，因为春静态的关系，当前页面点亮对应菜单项有BUG，但基本已经全部表达出我的意思了。

雪碧图的实现，另外一个案例

所谓雪碧图就是一张图，包含了很多小图，可以通过这些小图实现一个动作，如下是一张雪碧图：

那么我们可以通过CSS的animation来设置背景图片的位置，呈现出一种动态效果

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">.girl{background: url('img.png');width: 160px; //务必设置box的宽度，这样其他不在box中就不会显示height: 185px;background-size: 1120px 212px;-webkit-animation: demo 2s steps(7) infinite; //steps（7）表示设置7步完成动画}@-webkit-keyframes demo{0%{ background-position: 0 0 }100%{ background-position: -1120px 0} //设置背景图的位置从0 到-1120px}</style></head><body><div class="box"><div class="girl"></div></div></body></html>

是不是so easy！！！

雪碧图的实现，再来一个案例

像这种雪碧图如何平凑一起做动画呢：

<div class="man"><span style="white-space:pre"></span><div class="head"></div><div class="body"></div></div><div class="motor"><div class="wheel_front"></div><div class="wheel_back"></div><div class="motor_body"></div><div class="motor_handle"></div><div class="motor_pipe"><i class="pipe"></i><i class="smoke smoke_1"></i><i class="smoke smoke_2"></i></div></div>

样式怎么写呢：

.wrap_show .motor_wrap .man .head {-webkit-animation: a_motor_man_head 0.5s linear infinite;}.motor_wrap .man .head {display: block;height: 54px;width: 55px;background: url(../images/page_3/page_3_man.png) no-repeat -74px -181px;background-size: 172px 300px;position: absolute;left: 2px;top: -52px;-webkit-transform-origin: 50% 100%;}

这可看出来，这种动画的思路就是，定位每一个部位，然后分别给每一个部位做动画处理。参考：/course/demo/motorcycle/index.html