使用CSS3製作立體效果的導航選單

阿新 • • 發佈：2019-01-18

  1 <style>
  2 .keleyi-com-nav{
  3 width:520px;
  4 height: 50px;
  5 font:bold 0/50px Arial;
  6 text-align:center;
  7 margin:40px auto 0;
  8 border-radius: 8px;
  9 }
 10 .keleyi-com-nav a{display: inline-block;
 11 -webkit-transition: all 0.2s ease-in;
 12 -moz-transition: all 0.2s ease-in 
;
 13 -o-transition: all 0.2s ease-in;
 14 -ms-transition: all 0.2s ease-in;
 15 transition: all 0.2s ease-in;
 16 }
 17 .keleyi-com-nav a:hover{
 18 -webkit-transform:rotate(10deg);
 19 -moz-transform:rotate(10deg);
 20 -o-transform:rotate(10deg);
 21 -ms-transform:rotate(10deg);
 22 transform:rotate(10deg) 
;
 23 }
 24 .black{
 25 background: #2c2c2c;
 26 box-shadow: 0 7px 0 #0b0b0b;
 27 }
 28 .red{
 29 background: #f65f57;
 30 box-shadow: 0 7px 0 #ba4a45;
 31 }
 32 .blue{
 33 background: #36b7e5;
 34 box-shadow: 0 7px 0 #3595b8;
 35 }
 36 .green{
 37 background: #9cd564;
 38 box-shadow: 0 7px 0 #86b65b 
;
 39 }
 40 .keleyi-com-nav li{
 41 position:relative;
 42 display:inline-block;
 43 padding:0 16px;
 44 font-size: 13px;
 45 text-shadow:1px 2px 4px rgba(0,0,0,.5);
 46 list-style: none outside none;
 47 }
 48 
 49 .keleyi-com-nav li::before,
 50 .keleyi-com-nav li::after{
 51 content:"";
 52 position:absolute;
 53 top:14px;
 54 height: 25px;
 55 width: 1px;
 56 }
 57 .keleyi-com-nav li::after{
 58 right: 0;
 59 background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 60 background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 61 background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 62 background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 63 background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
 64 }
 65 .black li::before{
 66 left: 0;
 67 background: -moz-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 68 background: -webkit-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 69 background: -o-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 70 background: -ms-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 71 background: linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c);
 72 }
 73 .red li::before{
 74 left: 0;
 75 background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 76 background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 77 background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 78 background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 79 background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
 80 }
 81 .blue li::before{
 82 left: 0;
 83 background: -moz-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 84 background: -webkit-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 85 background: -o-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 86 background: -ms-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 87 background: linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc);
 88 }
 89 .green li::before{
 90 left: 0;
 91 background: -moz-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 92 background: -webkit-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 93 background: -o-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 94 background: -ms-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 95 background: linear-gradient(top, #9cd564, #7aa450 50%, #9cd564);
 96 }
 97 .keleyi-com-nav li:first-child::before{
 98 background: none;
 99 }
100 .keleyi-com-nav li:last-child::after{
101 background: none;
102 }
103 
104 .keleyi-com-nav a,
105 .keleyi-com-nav a:hover{
106 color:#fff;
107 text-decoration: none;
108 }
109 </style>
110 <ul class="keleyi-com-nav black">
111 <li><a href="http://keleyi.com/a/bjac/utovcdwr.htm">Home</a></li>
112 <li><a href="http://keleyi.com/dev/36d87291ba370420.htm">About Me</a></li>
113 <li><a href="http://keleyi.com/dev/9c4dbaff0fca9c64.htm">Portfolio</a></li>
114 <li><a href="http://keleyi.com/a/bjac/k3pi4ehx.htm">Blog</a></li>
115 <li><a href="http://keleyi.com/a/bjac/nmwpqgag.htm">Resources</a></li>
116 <li><a href="http://keleyi.com/game/1/">Contact Me</a></li>
117 </ul>
118 <ul class="keleyi-com-nav red">
119 <li><a href="http://keleyi.com/">首頁</a></li>
120 <li><a href="http://keleyi.com/ablut/">關於</a></li>
121 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
122 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">導航樣式</a></li>
123 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">側邊導航</a></li>
124 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">樹形選單</a></li>
125 </ul>
126 <ul class="keleyi-com-nav blue">
127 <li><a href="http://keleyi.com/a/bjac/et551617.htm">Home</a></li>
128 <li><a href="http://keleyi.com/a/bjac/3wjq3xm2.htm">About Me</a></li>
129 <li><a href="http://keleyi.com/a/bjac/7slnymte.htm">Portfolio</a></li>
130 <li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">Blog</a></li>
131 <li><a href="http://keleyi.com/a/bjac/c07969353e71816f.htm">Resources</a></li>
132 <li><a href="http://keleyi.com/a/bjac/532bedbffca1affa.htm">Contact Me</a></li>
133 </ul>
134 <ul class="keleyi-com-nav green">
135 <li><a href="http://keleyi.com/">首頁</a></li>
136 <li><a href="http://keleyi.com/ablut/">關於</a></li>
137 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
138 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">導航樣式</a></li>
139 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">側邊導航</a></li>
140 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">樹形選單</a></li>
141 </ul>

使用CSS3製作立體效果的導航選單

1 <style> 2 .keleyi-com-nav{ 3 width:520px; 4 height: 50px; 5 font:bold 0/50px Arial; 6 text-align:center; 7 margin:40px auto 0

WPF中製作立體效果的文字或LOGO圖形

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

用CSS3設計響應式導航選單

HTML程式碼下面是導航的HTML程式碼。<nav>標籤用於建立伸展條，包含絕對定位的css屬性。我會在稍後解釋這一點，current類表示當前啟用的菜單鏈接。 [html] view

如何利用jQuery製作下拉導航選單

下拉導航選單可以用jQuery製作，首先做三個導航條（css程式碼省略了） <div> <ul> <li> <a href="" class="li">襯衫</a> <ul clas

使用CSS3製作傾斜導航條和毛玻璃效果

導航條對於每一個Web前端攻城獅來說並不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實就是讓圖片或者背景使用相應的方法進行模糊處理。這種效果對使用者來說是十分具有視覺衝擊力的。本次分享的主題：通過CSS3來製作類似下面的導航條和毛玻璃效果。導航條是梯形形狀的。背景區域的毛玻璃效果。把導航

用jquery製作一個二級導航下拉選單

大體流程： 1使用$(function(){...})獲取到想要作用的HTML元素。 2通過使用children()方法尋找子元素。 &

jQuery實現導航選單伸縮效果

效果描述：若選單未展開點選則顯示子選單，否則將子選單上卷收縮，同時菜單方向圖示進行改變  <div class="leftMenu" id="leftmenu"> <div cla

css3製作3D立體模型

程式碼跟註釋都在裡面了！想知道是什麼效果不妨自己試試！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l

製作一個簡單的選單動畫效果

CSS3過渡屬性屬性描述 CSS transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 transition-property 規定應用過渡的 CSS 屬性的名稱。 transition-duration 定義過渡效果花費的時間。預設是 0。 trans

詳解用CSS3製作圓形滾動進度條的動畫效果

今天手把手教大家用CSS3製作圓形滾動進度條動畫！先看一下效果圖，會提升我們的學習興趣喲：第一種效果： html結構： <div id="progress"> <span></span> </div>

css ul li實現縱向導航選單效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

超級簡單的導航選單效果！

閱讀本篇文章大約花費您1-3分鐘！最近剛剛結束了資料庫的課程設計，因為正好學了JavaWeb，就做了一個簡單的管理系統，於是想著做一個選單導航欄，可以將所有的功能都放在這個導航欄中，因為還沒有學前端的框架，就直接用JS寫了一個簡單的效果：今天就和大家分享一下這個簡單的效果的製作

CSS3| 製作文字波浪線效果

css的設計之巧妙，實現之精妙，細細尋味，其妙非凡，妙不可言。這波浪線，取巧的運用了linear-gradient屬性，合角度、顏色、位置於一體，配合background-size，background-repeat，化一為多，平滑過渡。哇，這最後的效果太巧秒了！塵世間沒

用css3動畫製作幻燈片效果實現不了的問題

前段時間有一次去面試，面試官問到我一個如何用css3實現一個幻燈片效果的問題，當時想了半天沒想出來，結果就跪了。我發現類似於這些小例子經常容易問到，比如讓實現一個倒計時器，三列布局，還有一些事件比如拖拽事件，touch事件，冒泡事件；還有閉包，

css製作抽獎輪盤效果/扇形選單

先上效果圖附上程式碼： <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>輪盤</

詳解用CSS3製作圓形滾動進度條動畫效果

主題今天手把手教大家用CSS3製作圓形滾動進度條動畫，想不會都難！那麼，到底是什麼東東呢？先不急，之前我分享了一個css實現進度條效果的部落格《CSS實現進度條和訂單進度條》，但是呢，那篇部落格只是製作出來效果而已，並沒有動畫效果，因為當時正期末複習

HTML/CSS導航選單-水平選單的製作

垂直選單改成水平菜單隻需要改幾個引數就可以了float:left; <!DOCTYPE html> <html> <head> <meta charse

jquery和css3實現滑動導航選單

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="ht

css3 animation和background-position製作動畫效果（animation steps）

使用CSS3製作立體效果的導航選單

相關推薦