基于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 相关文章推荐
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 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
杏林同学录(八)
2006/10/09 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
JavaScript实现网页计算器功能
2020/10/29 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
python实现可逆简单的加密算法
2019/03/22 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
实习自我评价怎么写
2013/12/02 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
投标单位介绍信
2014/01/09 职场文书
青年文明号事迹材料
2014/01/18 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
质量管理标语
2014/06/12 职场文书
西安兵马俑导游词
2015/02/02 职场文书
请假条应该怎么写?
2019/06/24 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android