CSS霓虹燈是一種常見的網頁效果,它通過改變文本顏色和背景色的不斷循環來模擬閃爍的霓虹燈效果。以下是一個簡單的例子:
.neon { font-size: 48px; color: #fff; background-color: #06c; text-shadow: 0 0 10px #fff; animation: neon 1s ease-in-out infinite; } @keyframes neon { 0%, 100% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #06c, 0 0 40px #06c, 0 0 70px #06c, 0 0 80px #06c, 0 0 100px #06c; } 50% { text-shadow: none; } }
在這個例子中,我們首先定義了一個名為.neon的CSS類,將文本大小設置為48像素,文本顏色設置為白色,背景顏色設置為藍色。我們還添加了一個文本陰影,用于模擬霓虹燈的效果。
接著,我們定義了一個名為neon的keyframe動畫。在這個動畫中,我們使用了text-shadow屬性來控制文本陰影的值,使其在文本上方形成霓虹燈的效果。我們還使用了animation屬性來將動畫應用于.neon類,并使其無限循環。
以上是一個基本的CSS霓虹燈代碼。您可以通過調整文本大小、顏色和動畫持續時間來創建自己的霓虹燈效果。