前端笔记—从入门到坟墓[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，其内容中复制到的（复制“”内容）

执行结果：