CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


Posted in HTML / CSS onJune 03, 2013

在平常项目中,偶尔也会涉及一些前端的设计,但毕竟不是专业的,所以一直想要系统的学习一下。最近辞职了,等待入职新公司的期间,有空折腾学习一些CSS3的知识。
今天就从一个简单的圆形菜单的实现,来总结一些最近学习的收获。效果图如下:

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


下面,就来看看这个圆形半透明的菜单如何实现:
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>

效果如下:

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


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

效果如下:

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)

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

效果如下:

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


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

效果如下:

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


5. 网上定制的font字体现在附带很多常见图标(可参照 http://astronautweb.co/snippet/font-awesome/ ,字体可到此处下载):

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


下载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>

效果如下:

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


7. 最后一步,添加鼠标移动上去时改变颜色,添加如下样式:
复制代码
代码如下:

.ulMenu li a:hover {
color: #F90;
}

效果如下:

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)


猛戳【demo】下载例子。
HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
css3弹性盒模型实例介绍
May 27 #HTML / CSS
深入CSS3 动画效果的总结详解
May 09 #HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 #HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 #HTML / CSS
CSS3——齿轮转动关键代码
May 02 #HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 #HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 #HTML / CSS
You might like
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python3中布局背景颜色代码分析
2020/12/01 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
授权委托书样本
2014/04/03 职场文书
低碳环保标语
2014/06/12 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
毕业生个人自荐书
2015/03/05 职场文书
决心书格式范文
2015/09/23 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL