滑動(dòng)門(mén)門(mén)技術(shù)

所謂滑動(dòng)門(mén)技術(shù)就是利用背景圖片的分割，實(shí)現(xiàn)不同內(nèi)容長(zhǎng)度下，按鈕的可伸縮性。

具體思路：根據(jù)文本自適應(yīng)大小，我們可用兩個(gè)獨(dú)立的背景圖像來(lái)創(chuàng)造它。一個(gè)在左邊，一個(gè)在右邊。把這兩幅圖像想象成兩扇可滑動(dòng)的門(mén)，它們滑到一起并交迭，占據(jù)一個(gè)較窄的空間；或者相互滑開(kāi)，占據(jù)一個(gè)較寬的空間。

所用圖片：

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>點(diǎn)擊進(jìn)入首頁(yè)</span></a> <a href="javascript:;"><span>更多詳情</span></a> <a href="javascript:;"><span>聯(lián)系</span></a>

執(zhí)行結(jié)果：

字體圖標(biāo)

通常下載字體圖標(biāo)網(wǎng)站：
IcoMoon、iconfont、fontello

> SVG （可縮放矢量圖形）

可縮放矢量圖形是基于可擴(kuò)展標(biāo)記語(yǔ)言（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制定，是一個(gè)開(kāi)放標(biāo)準(zhǔn)。

svg格式，是基于svg字體渲染的一種格式。

> 操作步驟

1，打開(kāi)下載字體網(wǎng)站，以IcoMoon為例，點(diǎn)擊右上角IcoMoon App按鈕。
2，上傳以前使用的字體的selection.json文件（第一次使用字體圖標(biāo)忽略此步驟）。


3，點(diǎn)擊下面需要使用的字體圖標(biāo)。

然后點(diǎn)擊Generate Font按鈕，再點(diǎn)擊Download下載。
4，打開(kāi)壓縮包把fonts文件夾與style.css文件復(fù)制到項(xiàng)目目錄，即可使用。
使用方案一：
引入style.css文件后，為span標(biāo)簽添加相應(yīng)圖標(biāo)的class即可：

注：span標(biāo)簽內(nèi)就不要再加其他內(nèi)容了

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

使用方案二
寫(xiě)入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;/*可忽略不寫(xiě)*/vertical-align: -10%;/*可忽略不寫(xiě)*/ } <p><i>?</i> 上傳圖片</p>

注：i標(biāo)簽內(nèi)的內(nèi)容，是在壓縮文件內(nèi)有個(gè)demo.html，其內(nèi)容中復(fù)制到的（復(fù)制“?”內(nèi)容）

執(zhí)行結(jié)果：

總結(jié)

以上是生活随笔為你收集整理的前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。