基于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的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 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中for循环语句的几种变型
2006/11/26 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
javascript 常用方法总结
2009/06/03 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
javascript事件模型介绍
2016/05/31 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python实现键盘输入的实操方法
2019/07/16 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
师范生自荐信范文
2013/10/06 职场文书
母亲节演讲稿
2014/05/27 职场文书
新闻发布会策划方案
2014/06/12 职场文书
励志演讲稿300字
2014/08/21 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
中学生检讨书范文
2014/11/03 职场文书
教师工作表现评语
2014/12/31 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
汉语拼音教学反思
2016/02/22 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
Linux安装Docker详细教程
2022/07/07 Servers