015-Web前端-CSS动画-Sprite图与滑动门

CSS动画：雪碧图与滑动门

---

一、字符图标与切片

阿里巴巴网站可供下载。其中有用的部分为：

link后即可。

PS切片记得保存为Web所用格式。

---

二、CSS Sprite（雪碧图）

CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

原理：

    把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat、background-position属性，对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。

优点：

1. 利用CSS Sprite能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2. CSS sprite能减少图片的字节，(网络传输以字节为单位 ，1MB=1024千字节)，三张图片大小的总合大于拼成一张图片的大小。

3. 解决了命名困扰，只需要对一张图片命名，而非数十个小图片命名

---

三、滑动门

内容越多，背景图&宽度自动越大

1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。

1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。

1.3 最常见于各种导航栏的滑动门。（如微信首页）

注：使字体垂直居中用到的行高line-height属性 见 006