前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]

滑动门门技术

所谓滑动门技术就是利用背景图片的分割，实现不同内容长度下，按钮的可伸缩性。

具体思路：根据文本自适应大小，我们可用两个独立的背景图像来创造它。一个在左边，一个在右边。把这两幅图像想象成两扇可滑动的门，它们滑到一起并交迭，占据一个较窄的空间；或者相互滑开，占据一个较宽的空间。

所用图片：

a{height: 92px;line-height: 92px;padding-right: 52px;display: inline-block;background: url(Sliding.png) no-repeat right top;}span{display: inline-block;height: 92px;line-height: 92px;background: #fff url(Sliding.png);}span{padding:0px 10px 0px 30px;font-size: 20px;font-weight: bold;color: #fff;}

<a href="javascript:;"><span>点击进入首页</span></a><a href="javascript:;"><span>更多详情</span></a><a href="javascript:;"><span>联系</span></a>

执行结果：

字体图标

通常下载字体图标网站：

IcoMoon、iconfont、fontello

> SVG （可缩放矢量图形）

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

svg格式，是基于svg字体渲染的一种格式。

> 操作步骤

1，打开下载字体网站，以IcoMoon为例，点击右上角IcoMoon App按钮。

2，上传以前使用的字体的selection.json文件（第一次使用字体图标忽略此步骤）。

3，点击下面需要使用的字体图标。

然后点击Generate Font按钮，再点击Download下载。

4，打开压缩包把fonts文件夹与style.css文件复制到项目目录，即可使用。

使用方案一：

引入style.css文件后，为span标签添加相应图标的class即可：

注：span标签内就不要再加其他内容了

<span class="icon-image"></span>

使用方案二

写入css样式：

@font-face {font-family: 'icomoon';src:url('fonts/icomoon.eot?e2ufrf');src:url('fonts/icomoon.eot?e2ufrf#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?e2ufrf') format('truetype'),url('fonts/icomoon.woff?e2ufrf') format('woff'),url('fonts/icomoon.svg?e2ufrf#icomoon') format('svg');font-weight: normal;font-style: normal;}

i{font-family: 'icomoon';font-style: normal;/*可忽略不写*/vertical-align: -10%;/*可忽略不写*/}

<p><i></i> 上传图片</p>

注：i标签内的内容，是在压缩文件内有个demo.html，其内容中复制到的（复制“”内容）

执行结果：