CSS3+font字體文件實現圓形半透明菜單具體步驟(圖解)

2024-07-11 08:28:45

字體：大中小

來源：轉載

供稿：網友

在平常項目中，偶爾也會涉及一些前端的設計，但畢竟不是專業的，所以一直想要系統的學習一下。最近辭職了，等待入職新公司的期間，有空折騰學習一些CSS3的知識。
今天就從一個簡單的圓形菜單的實現，來總結一些最近學習的收獲。效果圖如下：

下面，就來看看這個圓形半透明的菜單如何實現：
1. 我們使用一個 ul 來制作菜單，代碼如下：

復制代碼

代碼如下:
<ul>
<li>
<a href="#">
首頁
</a>
</li>
<li>
<a href="#">
用戶
</a>
</li>
<li>
<a href="#">
活動
</a>
</li>
</ul>

效果如下：

2. 為ul添加樣式（ulMenu）以及其下的li，a，span，美化一下菜單:

復制代碼

代碼如下:
.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;
}

效果如下：

3. 如何讓菜單變成圓的，其實只要先將元素設置為長寬相等的正方形，再設置圓角為其長度的一半即可，例如，此例子中，li 的長寬是80px,則我們設置其圓角為40px，我們將 li 的樣式改為如下，增加圓角和背景色：

復制代碼

代碼如下:
.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;
}

效果如下：