CSS3橫向導航選單效果

admin發表於2018-07-22
CSSS3

本章節分享一段程式碼例項，它使用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>

相關文章