CSS3横向导航菜单效果

2018-7-22 16:32| 作者: admin| 查看: 749| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它使用css3实现了简单的导航菜单效果。

没有什么好分析额,只要明白相关属性的作用就可以轻松理解。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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="#">首页</a></li>
      <li><a href="#">蚂蚁部落</a></li>
      <li><a href="#">div教程</a></li>
      <li><a href="#">css教程</a></li>
      <li><a href="#">softwhy.com</a></li>
    </ul>
  </nav>
</header>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部