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 相关文章推荐
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python工程师面试题 与Python Web相关
2016/01/14 Python
python书籍信息爬虫实例
2018/03/19 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python队列Queue的详解
2019/05/10 Python
基于python实现对文件进行切分行
2020/04/26 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python 图片处理库exifread详解
2021/02/25 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis