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;
}

效果如下：