基于CSS3实现的漂亮Menu菜单效果代码


Posted in HTML / CSS onSeptember 10, 2015

本文实例讲述了基于CSS3实现的漂亮Menu菜单效果代码。分享给大家供大家参考。具体如下:

这是一款基于CSS3实现的漂亮Menu菜单代码,请注意,ie9以下版本的浏览器看不到效果,请使用IE9及火狐以及Chrome等浏览器。

四个圆角的方框整齐横向排列形成的菜单,当把鼠标放在任意菜单项的时候,该菜单项的底部会出现动画效果,一第向两端延伸的下划线,菜单整体挺漂亮的。

运行效果截图如下:

基于CSS3实现的漂亮Menu菜单效果代码

在线演示地址如下:

具体代码如下:

复制代码
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 技术实现的菜单</title>
<style type="text/css">
body{
background:#202020;
font:bold 12px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
min-width:960px;
color:#bbbbbb;
}
a {
text-decoration:none;
color:#fff;
}
h1 {
font: 4em normal Arial, Helvetica, sans-serif;
padding: 20px; margin: 0;
text-align:center;
}
h1 small{
font: 0.2em normal Arial, Helvetica, sans-serif;
text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
display: block;
}
header {
padding:0 40px;
margin:0 auto;
position:relative;
width:915px;
height:145px;
}
header nav ul{
list-style:none;
padding-top:50px;
}
header nav li {
position:relative;
float: left;
width:150px;
text-align:center;
padding-top:35px;
padding-bottom:35px;
color:#fff;
margin-right:20px;
border-radius:5px;
background:#161616;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
cursor:pointer;
}
li:after, li:before {
-moz-transition:width 0.5s ease 0s;
height: 0px;
width: 0px;
position: absolute;
content: ' ';
display: block;
opacity:0;
box-shadow: 0px 0px 5px #00c6ff;
}
li:after {
background: -moz-linear-gradient(left, #0ad, #08b);
top: 84px;
left: 75px;
}
li:before {
background: -moz-linear-gradient(right, #0ad, #08b);
top: 84px;
right:75px;
}
li:hover:after,li:hover:before{
width: 72px;
height: 1px;
opacity:1;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
</body>
</html>

希望本文所述对大家的css3网页设计有所帮助。

HTML / CSS 相关文章推荐
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 #HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 #HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 #HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 #HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 #HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 #HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 #HTML / CSS
You might like
php获取远程文件内容的函数
2015/11/02 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
spyder常用快捷键(分享)
2017/07/19 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
用python做游戏的细节详解
2019/06/25 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
同学会邀请函模板
2015/01/30 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书