CSS3+font字體文件實(shí)現(xiàn)圓形半透明菜單具體步驟(圖解)
發(fā)布時(shí)間：2013-06-03 11:10:54 作者：佚名 
我要評論
我要評論今天就從一個(gè)簡單的圓形菜單的實(shí)現(xiàn)，使用CSS3+font字體文件實(shí)現(xiàn)圓形菜單，下面來總結(jié)一些最近學(xué)習(xí)的收獲，感興趣的朋友可以參考下哈
在平常項(xiàng)目中，偶爾也會(huì)涉及一些前端的設(shè)計(jì)，但畢竟不是專業(yè)的，所以一直想要系統(tǒng)的學(xué)習(xí)一下。最近辭職了，等待入職新公司的期間，有空折騰學(xué)習(xí)一些CSS3的知識(shí)。
今天就從一個(gè)簡單的圓形菜單的實(shí)現(xiàn)，來總結(jié)一些最近學(xué)習(xí)的收獲。效果圖如下：
下面，就來看看這個(gè)圓形半透明的菜單如何實(shí)現(xiàn)：
1. 我們使用一個(gè) ul 來制作菜單，代碼如下：
復(fù)制代碼
代碼如下:<ul>
<li>
<a href="#">
<span>首頁</span>
</a>
</li>
<li>
<a href="#">
<span>用戶</span>
</a>
</li>
<li>
<a href="#">
<span>活動(dòng)</span>
</a>
</li>
</ul>
效果如下：
2. 為ul添加樣式（ulMenu）以及其下的li，a，span，美化一下菜單:
復(fù)制代碼
代碼如下:.ulMenu {
list-style: none;
}
.ulMenu li {
float: left;
height: 80px;
width: 80px;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
margin: 10px 10px 0 0;
}
.ulMenu li a {
display: block;
height: 100%;
padding: 0 15px;
font-size: 12px;
font-weight: bold;
color: #ccc;
text-decoration: none;
}
.ulMenu li a span {
display: block;
}
效果如下：
復(fù)制代碼
代碼如下:.ulMenu li
{
float: left;
height: 80px;
width: 80px;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
background: rgba(0,0,0,0.3);
border-radius: 40px;
-moz-border-radius:40px;
-webkit-border-radius: 40px;
margin:10px 10px 0 0;
}
效果如下：
4. 這樣離我們要的效果還有些差距，我們要加一些圖標(biāo)上去。CSS3的可以引入font字體可以讓我們省去找圖標(biāo)的麻煩，我們可以直接引入font字體文件，這個(gè)下一步再詳細(xì)說，這里，我們先改動(dòng)一下菜單的 html 代碼，用 個(gè)容器來顯示圖標(biāo)，這里我們用 i 元素，改動(dòng)后代碼如下:
復(fù)制代碼
代碼如下:<ul class="ulMenu">
<li>
<a href="#">
<i></i>
<span>
首頁
</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>
用戶
</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>
活動(dòng)
</span>
</a>
</li>
<div style="clear:both;">
</div>
</ul>
給 i 添加樣式：
復(fù)制代碼
代碼如下:.ulMenu li a i
{
display: inline-block;
width: 24px;
height: 24px;
margin-top: 17px;
margin-bottom: .25em;
font-size: 28px;
}
效果如下：
5. 網(wǎng)上定制的font字體現(xiàn)在附帶很多常見圖標(biāo)（可參照 http://astronautweb.co/snippet/font-awesome/ ，字體可到此處下載）：
下載font字體，在樣式文件中引用：
復(fù)制代碼
代碼如下:@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('font/fontawesome-webfont.woff') format('woff'),
url('font/fontawesome-webfont.ttf') format('truetype'),
url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
6. 接著，我們可以用下面形似的樣式來制定圖標(biāo)：
復(fù)制代碼
代碼如下:.css:before {
content: "\f001";
}
但是圖標(biāo)很多，我們可以直接引入下載的font文件下面css文件夾下的 font-awesome.css樣式文件，也就是說，上面的一大堆字體文件引用都可以省略為（當(dāng)然，真實(shí)開發(fā)中考慮到模塊化引入css加載性能略影響，個(gè)人覺得應(yīng)少用，希望有經(jīng)驗(yàn)的前輩賜教）：
復(fù)制代碼
代碼如下:@import url('font-awesome.css');
為 i 添加對應(yīng) css：
復(fù)制代碼
代碼如下:<ul class="ulMenu">
<li>
<a href="#">
<i class="icon-home">
</i>
<span>
首頁
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-user">
</i>
<span>
用戶
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-th-large">
</i>
<span>
活動(dòng)
</span>
</a>
</li>
<div style="clear:both;">
</div>
</ul>
效果如下：
7. 最后一步，添加鼠標(biāo)移動(dòng)上去時(shí)改變顏色，添加如下樣式：
復(fù)制代碼
代碼如下:.ulMenu li a:hover {
color: #F90;
}
效果如下：
猛戳【demo】下載例子。
相關(guān)文章
本篇文章主要介紹了CSS3中字體平滑處理和抗鋸齒渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-29- 這篇文章主要介紹了CSS3字體效果的設(shè)置方法小結(jié),包括陰影效果、省略號代替以及嵌入字體,需要的朋友可以參考下2016-06-13
- rem是css3新定義的設(shè)置字體大小屬性,rem大小都是以html的字體大小設(shè)置為參考值進(jìn)行一個(gè)字體大小縮放,下面就帶大家來輕松掌握CSS3中的字體大小單位rem的使用方法:2016-05-24
- CSS3中的font-face可以將我們上傳的自定義的字體顯示出來,有時(shí)比如我們要顯示英文音標(biāo)的字體時(shí)便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需2016-05-13
- 最近在整理學(xué)習(xí)CSS3的一些小知識(shí)，現(xiàn)在已經(jīng)整理了CSS3選擇器，CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的字體陰影——text-shadow的使用方法。2016-01-08
一款純css3實(shí)現(xiàn)的顏色漸變按鈕的代碼教程
今天給大家分享一款純css3實(shí)現(xiàn)的顏色漸變按鈕，這款按鈕的邊框和文字的顏色通過css3實(shí)現(xiàn)兩種顏色的漸變，清新淡雅，效果非常好看，需要的朋友可以參考下2014-11-12- 這篇文章主要介紹了css3 自定義字體font-face使用，需要的朋友可以參考下2014-05-14
CSS3用@font-face實(shí)現(xiàn)自定義英文字體
傳說中的CSS3基本上什么都可以，那么CSS3中可不可以自定義英文字體呢?答案是非常可以。用@font-face即可實(shí)現(xiàn)自定義英文字體，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下2013-09-23css3一款3D字體帶陰影效果的實(shí)現(xiàn)步驟
3D字體而且還帶有陰影，這種效果想必大家只有認(rèn)為一些高級的作圖工具才可以實(shí)現(xiàn)的吧，css3的出現(xiàn)讓這一切看似不可能的實(shí)現(xiàn)成為可能，接下來為大家介紹下3D字體帶陰影效果的2013-03-20- 網(wǎng)頁制作Webjx文章簡介：想要制作一些很酷的頭部效果而且擺脫網(wǎng)站安全字體并且不使用圖片文件？那么就使用CSS3嵌入字體吧！ 想要制作一些很酷的頭部效果而2009-04-02
