zoukankan      html  css  js  c++  java
  • css3制作立体导航菜单

    1.效果图如下:

     

    2.css实现

       下面代码中红色和绿色是两种实现方法,选一即可。

    <!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{
              560px;
              height: 50px;
              font:bold 0/50px Arial;
              text-align:center;
              margin:40px auto 0;
              background: #f65f57;
              /*制作圆*/
              border-radius:8px;
              /*制作导航立体风格*/
              box-shadow:0px 5px #b64b41;
            }
            .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{ background: linear-gradient(to right, #dd2926,#a82724) no-repeat right/ 1px 15px; } .nav li:last-child { background:none; }
    */ /*使用伪元素制作导航列表项分隔线*/ .nav li::after{ content:""; position:absolute; right:0px; top:17px; 1px; height:15px; background:linear-gradient(to right,#dd2926,#a82724) no-repeat top right /1px 15px; } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child::after { 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>
  • 相关阅读:
    easyExcel入门
    UML-从需求到设计--迭代进化
    UML-操作契约总结
    102. Binary Tree Level Order Traversal
    98. Validate Binary Search Tree
    95. Unique Binary Search Trees II
    96. Unique Binary Search Trees
    94. Binary Tree Inorder Traversal
    84. Largest Rectangle in Histogram
    92. Reverse Linked List II
  • 原文地址:https://www.cnblogs.com/summer323/p/4730561.html
Copyright © 2011-2022 走看看