基于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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
了解重排与重绘
2019/05/29 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
python中常用的九种预处理方法分享
2016/09/11 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
如何用SQL语句进行模糊查找
2015/09/25 面试题
什么是命名空间(NameSpace)
2015/11/24 面试题
应届毕业生求职信范文
2014/05/08 职场文书
见习报告格式要求
2014/11/04 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python