CSS3制作立体导航

Posted 2020-08-07 杜Amy

 

<ul class="nav">
    <li><a href="">首页</a></li>
    <li><a href="">关于我们</a></li>
    <li><a href="">展示</a></li>
    <li><a href="">管理</a></li>
    <li><a href="">文化</a></li>
    <li><a href="">联系我们</a></li>
</ul>

 1  <style>
 2         body{
 3             background: #ebebeb;
 4         }
 5         .nav{
 6             width:450px;
 7             height: 50px;
 8             font:bold 0/50px Arial;
 9             margin:40px auto 0;
10             background: #3fbeff;
11             border-radius:5px;
12             box-shadow:0 4px #04a7fa; /*阴影*/
13         }
14 
15         .nav a{
16             display: inline-block;
17             -webkit-transition: all 0.2s ease-in;
18             -moz-transition: all 0.2s ease-in;
19             -o-transition: all 0.2s ease-in;
20             -ms-transition: all 0.2s ease-in;
21             transition: all 0.2s ease-in;   /*持续时间0.2s，延迟时间0.5s，渐显效果ease-in*/
22         }
23         .nav a:hover{
24             -webkit-transform:rotate(10deg);
25             -moz-transform:rotate(10deg);
26             -o-transform:rotate(10deg);
27             -ms-transform:rotate(10deg);
28             transform:rotate(10deg);  /*鼠标移上去后，顺时针旋转10度*/
29         }
30 
31         .nav li{
32             position:relative;
33             display:inline-block;
34             padding:0 16px;
35             font-size: 12px;
36             text-shadow:1px 2px 4px rgba(0,0,0,.5); /*文本阴影，0.5的透明*/
37             list-style: none outside none;
38         }
39 
40         .nav li{
41             background:linear-gradient(to bottom,#04a7fa,#0599e4,#0488cb) no-repeat right / 1px 15px;
42         } /*右边的一条小线*/
43 
44         .nav li:last-child{background:none;}  /*删除伪元素的最后一个分割线*/
45 
46         .nav a,
47         .nav a:hover{
48             color:#fff;
49             text-decoration: none;
50         }
51     </style>

效果图：