在网页中我们经常可以看到，有些图片在鼠标经过的时候，有一个上下或左右的滑动效果，很实用页很方便，今天正好用到，拿来和大家分享一下，有什么不对或意见欢迎指正。html部分如下，这里本来打算用jq来着，后来没有用到。。话不多说直接上代码。。 css雪碧（CSS Sprite）和css3过渡效...
分类：
Web程序 时间：
2015-11-27 14:51:40
阅读次数：
127
很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片。这种网页使用的就是CSS Sprite，通过将多个图标整合在同一张图片，可以减少向服务器请求图片的次数，加快网页的加载速度。CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所...
分类：
Web程序 时间：
2015-11-17 12:42:29
阅读次数：
211
Grunt?,??javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的，一个全副武装的前端可能会是这样的：...
分类：
其他好文 时间：
2015-11-10 12:36:27
阅读次数：
318
安装插件：npm install grunt-css-sprite --save-devgrunt-css-sprite主要功能：1.对 css 文件进行处理，收集切片序列，生成雪碧图2.在原css代码中为切片添加background-position属性3.生成用于高清设备的高清雪碧图，并在css...
分类：
Web程序 时间：
2015-09-29 18:45:15
阅读次数：
289
雅虎前端优化法则1、尽量减少HTTP请求次数 网页加载中大部分时间都在下载js，css，flash，图片 1、合并文件 css，js，图片（css sprite） 2、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，因为他可以...
分类：
其他好文 时间：
2015-09-22 10:00:39
阅读次数：
146
---恢复内容开始---**简介**CSS SPRITE 即 CSS雪碧，即是将诸多图片合成一张图片，然后使用CSS 的background和background-position属性渲染。这样做的好处是：减少了网站的HTTP请求次数**compass如何合并雪碧图**1. 把需要合并的图片(1.p...
分类：
其他好文 时间：
2015-09-20 16:16:23
阅读次数：
197
目的： 有效的减少http请求数量，加速内容显示因为每请求一次，就会和服务器链接一次，建立链接是需要额外事件的。1.静态图片，不随用户信息的变化而变化2.小图片，图片容量比较小3.加载量比较大一些大图不建议拼成雪碧图实现原理： CSS background-positionCSS Gaga可以自动生...
分类：
Web程序 时间：
2015-09-12 21:46:56
阅读次数：
130
[1]图片各种格式及特点 [2]css sprite
分类：
其他好文 时间：
2015-09-09 19:16:20
阅读次数：
241
CSS3 大大强化了制作动画的能力，但是如果要做出图案比较复杂的动画，选择 GIF 依然是一个不错的选择。今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法，可以做出类似于 GIF 动画的效果。CSS3 Animation steps函数首先看看，...
分类：
Web程序 时间：
2015-09-09 11:08:31
阅读次数：
176
css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方，就是拼图和后期维护的成本比较大。也正是因为这一点，导致很多开发者懒于使用css雪碧图。对于这种耗时、枯燥...
分类：
Web程序 时间：
2015-08-12 12:53:35
阅读次数：
166
