基于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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP实现小偷程序实例
2016/10/31 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
机器学习python实战之手写数字识别
2017/11/01 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
消防安全宣传口号
2014/06/10 职场文书
2014年项目工作总结
2014/11/24 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
总经理聘用协议书
2015/09/21 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫