基于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实现的tab选项卡代码分享
Dec 09 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 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记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
jquery each()源代码
2011/02/14 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
详解vue v-model
2020/08/31 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
元旦促销方案
2014/03/15 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
倡议书格式
2014/04/14 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
值班管理制度范本
2015/08/06 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server