基于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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
css3图片边框border-image的用法
Jun 30 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
Html5与App的通讯方式详解
Oct 24 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
jquery tools之tooltip
2009/07/25 Javascript
jquery text()要注意啦
2009/10/30 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
Python list操作用法总结
2015/11/10 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
高级技校毕业生自荐信
2013/11/18 职场文书
《问银河》教学反思
2014/02/19 职场文书
经典团队口号
2014/06/06 职场文书
会计毕业生自荐书
2014/06/12 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
会议营销主持词
2015/07/03 职场文书