發光風格效果

是否可以在CSS中創建像這樣的發光文字 Flash Example？發光風格效果

我試着找到一個解決方案，但我找不到像這樣的東西。有沒有教程來獲得這種行爲？我發現this one，但他們之間有很大的區別。

沒有，這也不是沒有可能超過1000行的Javascript。 –

@NielsKeurentjes這是不正確的，因爲兩個答案顯示。 – 2013-09-26 01:11:43

@LegoStormtroopr比較那些他試圖複製的給定Flash例子的2個答案類似於說菲亞特Multipla與法拉利完全相同，因爲它們可以驅使你到最近的超市。在沒有數千行代碼的情況下，重現確切的效果，甚至是靠近它的東西，簡直是不可能的。 –

我不願意鏈接到W3Schools，但我在一臺目前沒有CSS3功能的計算機上。

您可以使用the text-shadow property獲得所需的效果。通過給陰影一個明亮的顏色，而不是一個黑暗的，你可以得到一個霓虹燈效果。你是不是要能夠得到無JavaScript的動畫效果，但代碼的效果：

<a class='neon' href='http://example.com'>My cool effect</a>

隨着相應的CSS規則：

a.neon:hover { 
    text-shadow:0 0 3px #eaeaff 
}

應該接近的效果你需要。

2013-09-25 23:23:00

爲什麼不鏈接到MDN呢？ https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow – Ryan

@ minitech W3Schools明確提到了一個接近OP想要的'霓虹'效果。而我無法測試它...該死的工作電腦:( – 2013-09-26 01:36:37

雖然該示例顯示了發光效果的動畫，但您也可以在CSS中的懸停選擇器上使用文字陰影。

HTML

<body> 
    <ul> 
     <li class="link">Link</li>  
     <li class="link">Link2</li> 
     <li class="link">Link3</li> 
    </ul>  
</body>

CSS

body{ 
    background-color:steelblue; 
} 

.link{ 
    font-size:2em; 
} 

.link:hover{ 
    text-shadow: 0px 0px 20px rgba(192, 192, 192, 1); 
}

2013-09-25 23:24:08

回答