基于CSS3实现的漂亮Menu菜单效果代码
程序员文章站
2024-01-25 15:08:34
这篇文章主要为大家介绍了基于CSS3实现的漂亮Menu菜单效果代码,采用纯css3技术实现鼠标滑过菜单项底部出现高亮光标的效果,具有一定参考借鉴价值,需要的朋友可以参考下... 15-09-10...
本文实例讲述了基于css3实现的漂亮menu菜单效果代码。分享给大家供大家参考。具体如下：
这是一款基于css3实现的漂亮menu菜单代码，请注意，ie9以下版本的浏览器看不到效果，请使用ie9及火狐以及chrome等浏览器。
四个圆角的方框整齐横向排列形成的菜单，当把鼠标放在任意菜单项的时候，该菜单项的底部会出现动画效果，一第向两端延伸的下划线，菜单整体挺漂亮的。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
复制代码
代码如下:<!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>
<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网页设计有所帮助。
上一篇： 如何判断一张图片是不是高斯模糊图
推荐阅读
-
基于CSS3实现的漂亮Menu菜单效果代码
-
css3实现的气泡效果代码实例_html/css_WEB-ITnose
-
基于纯 CSS3 技术实现美观的标签云效果_html/css_WEB-ITnose
-
jQuery-Easyui 1.2 实现多层菜单效果的代码_jquery
-
jQuery实现有动画淡出效果的二级折叠菜单代码_jquery
-
css3实现的圆角效果代码实例_html/css_WEB-ITnose
-
js tab效果的实现代码_导航菜单
-
基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery
-
基于CSS3的animation属性实现微信拍一拍动画效果
-
css3实现的气泡效果代码实例_html/css_WEB-ITnose