基于CSS3制作立體效果導航菜單

2024-07-11 08:29:36

字體：大中小

來源：轉載

供稿：網友

先給大家展示效果圖，效果如下：

錯新站長站友情提醒大家：請使用支持CSS3的瀏覽器訪問本頁面，獲得更好效果。

源代碼：

CSS Code復制內容到剪貼板

<style> .keleyi-com-nav{
width:px; height: px;
font:bold /px Arial; text-align:center;
margin:px auto ; border-radius: px;
} .keleyi-com-nav a{display: inline-block;
-webkit-transition: all .s ease-in; -moz-transition: all .s ease-in;
-o-transition: all .s ease-in; -ms-transition: all .s ease-in;
transition: all .s ease-in; }
.keleyi-com-nav a:hover{ -webkit-transform:rotate(deg);
-moz-transform:rotate(deg); -o-transform:rotate(deg);
-ms-transform:rotate(deg); transform:rotate(deg);
} .black{
background: #ccc; box-shadow: px #bbb;
} .red{
background: #ff; box-shadow: px #baa;
} .blue{
background: #be; box-shadow: px #b;
} .green{
background: #cd; box-shadow: px #bb;
} .keleyi-com-nav li{
position:relative; display:inline-block;
padding: px; font-size: px;
text-shadow:px px px rgba(,,,.); list-style: none outside none;
} .keleyi-com-nav li::before,
.keleyi-com-nav li::after{ content:"";
position:absolute; top:px;
height: px; width: px;
} .keleyi-com-nav li::after{
rightright: ; background: -moz-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
background: -webkit-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,)); background: -o-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
background: -ms-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,)); background: linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
} .black li::before{
left: ; background: -moz-linear-gradient(top, #ccc, # %, #ccc);
background: -webkit-linear-gradient(top, #ccc, # %, #ccc); background: -o-linear-gradient(top, #ccc, # %, #ccc);
background: -ms-linear-gradient(top, #ccc, # %, #ccc); background: linear-gradient(top, #ccc, # %, #ccc);
} .red li::before{
left: ; background: -moz-linear-gradient(top, #ffa, #eea %, #ffa);
background: -webkit-linear-gradient(top, #ffa, #eea %, #ffa); background: -o-linear-gradient(top, #ffa, #eea %, #ffa);
background: -ms-linear-gradient(top, #ffa, #eea %, #ffa); background: linear-gradient(top, #ffa, #eea %, #ffa);
} .blue li::before{
left: ; background: -moz-linear-gradient(top, #bdc, #a %, #bdc);
background: -webkit-linear-gradient(top, #bdc, #a %, #bdc); background: -o-linear-gradient(top, #bdc, #a %, #bdc);
background: -ms-linear-gradient(top, #bdc, #a %, #bdc); background: linear-gradient(top, #bdc, #a %, #bdc);
} .green li::before{
left: ; background: -moz-linear-gradient(top, #cd, #aa %, #cd);
background: -webkit-linear-gradient(top, #cd, #aa %, #cd); background: -o-linear-gradient(top, #cd, #aa %, #cd);
background: -ms-linear-gradient(top, #cd, #aa %, #cd); background: linear-gradient(top, #cd, #aa %, #cd);
} .keleyi-com-nav li:first-child::before{
background: none; }
.keleyi-com-nav li:last-child::after{ background: none;
} .keleyi-com-nav a,
.keleyi-com-nav a:hover{ color:#fff;
text-decoration: none; }
</style> <ul class="keleyi-com-nav black">
<li><a href="http://keleyi.com/a/bjac/utovcdwr.htm">Home</a></li> <li><a href="http://keleyi.com/dev/dba.htm">About Me</a></li>
<li><a href="http://keleyi.com/dev/cdbafffcac.htm">Portfolio</a></li> <li><a href="http://keleyi.com/a/bjac/kpiehx.htm">Blog</a></li>
<li><a href="http://keleyi.com/a/bjac/nmwpqgag.htm">Resources</a></li> <li><a href="http://keleyi.com/game//">Contact Me</a></li>
</ul> <ul class="keleyi-com-nav red">
<li><a href="http://keleyi.com/">首頁</a></li> <li><a href="http://keleyi.com/ablut/">關于</a></li>
<li><a href="http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX</a></li> <li><a href="http://keleyi.com/a/bjac/dib.htm">導航樣式</a></li>
<li><a href="http://keleyi.com/a/bjac/mtpy.htm">側邊導航</a></li> <li><a href="http://keleyi.com/dev/ae.htm">樹形菜單</a></li>
</ul> <ul class="keleyi-com-nav blue">
<li><a href="http://keleyi.com/a/bjac/et.htm">Home</a></li> <li><a href="http://keleyi.com/a/bjac/wjqxm.htm">About Me</a></li>
<li><a href="http://keleyi.com/a/bjac/slnymte.htm">Portfolio</a></li> <li><a href="http://keleyi.com/a/bjac/mnmpmbv.htm">Blog</a></li>
<li><a href="http://keleyi.com/a/bjac/cef.htm">Resources</a></li> <li><a href="http://keleyi.com/a/bjac/bedbffcaaffa.htm">Contact Me</a></li>
</ul> <ul class="keleyi-com-nav green">
<li><a href="http://keleyi.com/">首頁</a></li> <li><a href="http://keleyi.com/ablut/">關于</a></li>
<li><a href="http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX</a></li> <li><a href="http://keleyi.com/a/bjac/dib.htm">導航樣式</a></li>
<li><a href="http://keleyi.com/a/bjac/mtpy.htm">側邊導航</a></li> <li><a href="http://keleyi.com/dev/ae.htm">樹形菜單</a></li>
</ul>