前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]
滑動(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è)較寬的空間。
所用圖片:
執(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樣式:
注: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)題。
- 上一篇: #205-[STL set] 灰色头像
- 下一篇: 前端 Git 使用约定