CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
发布时间：2013-06-03 11:10:54 作者：佚名 
我要评论
我要评论今天就从一个简单的圆形菜单的实现，使用CSS3+font字体文件实现圆形菜单，下面来总结一些最近学习的收获，感兴趣的朋友可以参考下哈
在平常项目中，偶尔也会涉及一些前端的设计，但毕竟不是专业的，所以一直想要系统的学习一下。最近辞职了，等待入职新公司的期间，有空折腾学习一些CSS3的知识。
今天就从一个简单的圆形菜单的实现，来总结一些最近学习的收获。效果图如下：
下面，就来看看这个圆形半透明的菜单如何实现：
1. 我们使用一个 ul 来制作菜单，代码如下：
复制代码
代码如下:<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>用户</span>
</a>
</li>
<li>
<a href="#">
<span>活动</span>
</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;
}
效果如下：
复制代码
代码如下:.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. 这样离我们要的效果还有些差距，我们要加一些图标上去。CSS3的可以引入font字体可以让我们省去找图标的麻烦，我们可以直接引入font字体文件，这个下一步再详细说，这里，我们先改动一下菜单的 html 代码，用 个容器来显示图标，这里我们用 i 元素，改动后代码如下:
复制代码
代码如下:<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>
活动
</span>
</a>
</li>
<div style="clear:both;">
</div>
</ul>
给 i 添加样式：
复制代码
代码如下:.ulMenu li a i
{
display: inline-block;
width: 24px;
height: 24px;
margin-top: 17px;
margin-bottom: .25em;
font-size: 28px;
}
效果如下：
5. 网上定制的font字体现在附带很多常见图标（可参照 http://astronautweb.co/snippet/font-awesome/ ，字体可到此处下载）：
下载font字体，在样式文件中引用：
复制代码
代码如下:@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. 接着，我们可以用下面形似的样式来制定图标：
复制代码
代码如下:.css:before {
content: "\f001";
}
但是图标很多，我们可以直接引入下载的font文件下面css文件夹下的 font-awesome.css样式文件，也就是说，上面的一大堆字体文件引用都可以省略为（当然，真实开发中考虑到模块化引入css加载性能略影响，个人觉得应少用，希望有经验的前辈赐教）：
复制代码
代码如下:@import url('font-awesome.css');
为 i 添加对应 css：
复制代码
代码如下:<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>
活动
</span>
</a>
</li>
<div style="clear:both;">
</div>
</ul>
效果如下：
7. 最后一步，添加鼠标移动上去时改变颜色，添加如下样式：
复制代码
代码如下:.ulMenu li a:hover {
color: #F90;
}
效果如下：
猛戳【demo】下载例子。
相关文章
本篇文章主要介绍了CSS3中字体平滑处理和抗锯齿渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-29- 这篇文章主要介绍了CSS3字体效果的设置方法小结,包括阴影效果、省略号代替以及嵌入字体,需要的朋友可以参考下2016-06-13
- rem是css3新定义的设置字体大小属性,rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放,下面就带大家来轻松掌握CSS3中的字体大小单位rem的使用方法:2016-05-24
- CSS3中的font-face可以将我们上传的自定义的字体显示出来,有时比如我们要显示英文音标的字体时便需要用到,本文就整理了一下使用CSS3的font-face字体嵌入样式的方法讲解,需2016-05-13
- 最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的字体阴影——text-shadow的使用方法。2016-01-08
- 今天给大家分享一款纯css3实现的颜色渐变按钮，这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，清新淡雅，效果非常好看，需要的朋友可以参考下2014-11-12
- 这篇文章主要介绍了css3 自定义字体font-face使用，需要的朋友可以参考下2014-05-14
- 传说中的CSS3基本上什么都可以，那么CSS3中可不可以自定义英文字体呢?答案是非常可以。用@font-face即可实现自定义英文字体，下面有个不错的示例，感兴趣的朋友可以了解下2013-09-23
- 3D字体而且还带有阴影，这种效果想必大家只有认为一些高级的作图工具才可以实现的吧，css3的出现让这一切看似不可能的实现成为可能，接下来为大家介绍下3D字体带阴影效果的2013-03-20
- 网页制作Webjx文章简介：想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！ 想要制作一些很酷的头部效果而2009-04-02
最新评论