css3制作导航栏

最新推荐文章于 2021-11-04 11:34:04 发布

weixin_30594001

最新推荐文章于 2021-11-04 11:34:04 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yzycoder/p/4666119.html

本文介绍了一种使用CSS实现的立体风格导航栏的设计方法。通过简单的HTML结构与CSS样式，可以创建具有圆角、阴影效果及鼠标悬停旋转动画的导航菜单。适用于网页设计初学者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>CSS制作立体导航</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:5px;
          /*制作导航立体风格*/
          box-shadow:4px 4px #999;
       }
       .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:after{
        position:absolute;
        right:0;
        content:'';
        width:1px;
        height:100%;
        background-image:linear-gradient(to bottom, #f65f57,#f65f57,#f65f57,#666,#f65f57, #f65f57,#f65f57);
        display:inline-block;
        }
        /*删除第一项和最后一项导航分隔线*/
        .nav li:last-child:after{
        display: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>