導航菜單背後的發光

我在導航中使用發光創建了一個小動畫。如圖所示，發光在導航菜單的後面。我試過但不清楚結果，我需要相同的結果如圖所示。導航菜單背後的發光

http://jsfiddle.net/naresh_kumar/GCpDW/5/

enter image description here

HTML

<div id="topnav" style="float:right;"> 
    <ul class="nav clearfix"> 
     <li id="menu-item-6"> 
      <a href="">Home</a> 
     </li> 
     <li id="menu-item-8"> 
      <a>Tutor Videos</a> 
     </li> 
     <li id="menu-item-7"> 
      <a>Download Font</a> 
     </li> 
     <li id="menu-item-9"> 
      <a>news</a> 
     </li> 
     </ul> 
    </div>

CSS

body{background:#000000;} 
ul { margin-left: 20px; padding: 0; } 
#topnav { 
    font-size: 8pt; 
    font-weight: bold; 
    margin-top: 2%; 
    float: left; 
    font-size: 8pt; 
    margin-bottom: 0; 
    margin-left: 63px; 
    margin-right: 0; 
    margin-top: 4% !important; 
    padding: 0; 
    width: 60%; 
} 

#topnav ul { 
    background: none repeat scroll 0 0 #E2E2DE; 
    border: 3px solid #FFFFFF; 
    line-height: 1; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
} 

#topnav ul li { 
    float: left; 
    width: auto; 
} 

#topnav ul li a { 
    border-bottom: 15px solid transparent; 
    border-top: 15px solid transparent; 
    display: block; 
    line-height: 30px; 
    margin: -17px 0; 
} 

#topnav ul a { 
    color: #000000 !important; 
    display: block; 
    line-height: 24px; 
    padding: 5px 10px; 
    position: relative; 
    text-decoration: none; 
    z-index: 90; 
} 

#topnav ul a:hover, #topnav ul ul a:hover { 
    border-color: white; 
    color: #0A0A0A; 
    box-shadow: 0 0 50px gold, 0 0 150px gold; 
} 
.clearfix:after, blockquote:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix, blockquote { 
    display: block; 
} 
.clearfix, blockquote { 
    display: inline-block; 
}

來源

2013-06-20 Shagun Sood

「我試過但不清楚的結果」 - 你能描述一下你所看到的不想要的行爲，以及你試圖實現的行爲嗎？我們不是來爲你做你的工作，我們來這裏回答問題的方式，讓其他人在未來也能從中受益。 –

大家知道，在** web **設計中使用'pt'可能不是一個好主意。這是一個打印測量。請參閱http://css-tricks.com/css-font-size/ –

這是布萊恩g使用CSS3很難在菜單後面獲得光芒，但是通過一些微小的調整（包括對光暈使用更多細微的顏色），你可以使你已經生成的例子看起來相當合理，菜單

#topnav ul a:hover, #topnav ul ul a:hover { 
    border-color: white; 
    color: #0A0A0A; 
    box-shadow: 0 0 100px #ffffee, 0 0 100px #ffffee; 
}

來源

2013-06-20 12:57:38

導航菜單背後的發光

回答

相關問題