css3创建一个动态的立体的导航栏

来源：互联网发布：修图软件电脑编辑：程序博客网时间：2024/06/05 22:57

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="

http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
  background: #ebebeb;
}
.nav{
  width:560px;
  height: 50px;
  font:bold 0/50px Arial;
  text-align:center;
  margin:40px auto 0;
      background: #f65f57;
  /*制作圆*/
  border-radius:8px;
          /*制作导航立体风格*/
          box-shadow:0 5px 1px 0 red;
}
.nav a{
  display: inline-block;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.nav a:hover{
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  transform:rotate(10deg);
}

.nav li{
  position:relative;
  display:inline-block;
  padding:0 16px;
  font-size: 13px;
  text-shadow:1px 2px 4px rgba(0,0,0,.5);
  list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
.nav li:before{
     content:"";
         position:absolute;
         top:14px;
         height:25px;
         width:1px;
         left:-1px;
         background-image:linear-gradient(to bottom,#f65f57,#fff,#f65f57);
}

        /*删除第一项和最后一项导航分隔线*/
.nav li:first-child:before{
     background:none;
}
.nav a,
.nav a:hover{
  color:#fff;
  text-decoration: none;
}

</style>
</head>
<body>
<ul class="nav">
     <li><a href="">Home</a></li>
     <li><a href="">About Me</a></li>
     <li><a href="">Portfolio</a></li>
     <li><a href="">Blog</a></li>
     <li><a href="">Resources</a></li>
     <li><a href="">Contact Me</a></li>
</ul>
</body>
</html>

0 0