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

你可能感兴趣的:(015-Web前端-CSS动画-Sprite图与滑动门)