如圖所示，這是一個很炫酷的霓虹燈文字效果且背景炫酷，就像很多個燈光閃爍著不同的顏色。gg728資訊網——每日最新資訊28at.com

本次文章將解析如何用CSS代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點：gg728資訊網——每日最新資訊28at.com

• 整個背景中有平均分布的小點襯托中心區域
• 文字閃爍效果如同霓虹燈一樣
• 文字背景呈多個平均分布的亮點
• 背景亮點的顏色整體呈現漸變色變化

1. 默認背景色

首先我們來看看如何通過CSS創建一個多個小點背景效果。gg728資訊網——每日最新資訊28at.com

1.1 設置根元素變量

在:root偽類中，定義了一系列的CSS變量，這些變量在整個文檔中都是可用的。例如，--rotate用于控制旋轉動畫的角度，而--radius、--bg、--width等用于定義背景和形狀的基本屬性。gg728資訊網——每日最新資訊28at.com

:root {  --rotate: 0deg;  --radius: 12;  --bg: hsl(210 30% 70% / 0.15);  --width: 80;  --height: 80;  --border: 0;  --blur: 10;  --alpha: 0;  font-family: 'Montserrat', sans-serif;}

1.2 設計背景樣式

在body標簽中設置了背景的基礎樣式，使用了徑向漸變（radial-gradient）來創建一種特殊的紋理效果。配合 background-size 和 background-position 即可完成默認的背景效果。gg728資訊網——每日最新資訊28at.com

body {  background-color: #25282a;  background-image:     radial-gradient(#535150a0 0.95px, transparent 0.95px),    radial-gradient(#535150a0 0.95px, #25282a 0.95px);  background-size: 38px 38px;  background-position: 0 0, 19px 19px;  min-height: 100vh;  display: grid;  place-content: center;  padding: 0 10vw;}

此時的背景效果如下：gg728資訊網——每日最新資訊28at.com

圖片gg728資訊網——每日最新資訊28at.com

2. 創建漸變背景旋轉效果

2.1 旋轉動畫的實現

新增.back類利用conic-gradient來創建一個彩色圓環效果，而--rotate變量控制著這個圓環的旋轉。這種效果通過@keyframes spin動畫實現，其中--rotate的值在一定周期內從0deg變化到360deg，實現了一個完整的旋轉周期。gg728資訊網——每日最新資訊28at.com

.back {  // 背景圖像和漸變設置  background-image:     radial-gradient(#53515010 1px, transparent 0),    radial-gradient(#53515010 2px, #25282a 0),    conic-gradient(from var(--rotate) at 50% 70%, hsl(0 0% 98% / .1) 0deg, #eec32d 72deg, #ec4b4b 144deg, #709ab9 216deg, #4dffbf 288deg, hsl(0 0% 98% / .1) 1turn);  background-size:     5vmin 5vmin,     5vmin 5vmin,    100% 100%;  animation: spin 5s linear infinite;}@keyframes spin {  0% { --rotate: 0deg; }  100% { --rotate: 360deg; }}

如果這里僅設置 conic-gradient 并配合 animation 動畫的效果就是下面的樣子：gg728資訊網——每日最新資訊28at.com

圖片gg728資訊網——每日最新資訊28at.com

但是再增加一個 radial-gradient 徑向漸變并設置 background-size 為 5vmin 5vmin 的顯示區域。gg728資訊網——每日最新資訊28at.com

radial-gradient(#53515010 2px, #25282a 0),

完成后的效果圖：gg728資訊網——每日最新資訊28at.com

圖片gg728資訊網——每日最新資訊28at.com

這里需要注意的一點就是多個漸變設置的順序，這里的 conic-gradient 要放置在后面才能完成這個效果。這種旋轉效果不僅增加了頁面的視覺吸引力，而且通過顏色的流動變換，為用戶提供了一種動態的互動體驗。它不僅是一種美學上的選擇，也展示了CSS動畫和漸變的強大功能。gg728資訊網——每日最新資訊28at.com

2. 霓虹燈文字效果

接下來探討如何實現背景中的霓虹燈文字效果。gg728資訊網——每日最新資訊28at.com

2.1 文本的動態陰影效果

通過設置text-shadow屬性，并使用自定義變量--color1到--color4，為文本創建了動態的陰影效果。gg728資訊網——每日最新資訊28at.com

.gd {  color: rgb(182, 255, 192);  --color1: pink;  --color2: orangered;  --color3: red;  --color4: magenta;  text-shadow:     0 0 10px var(--color1),    0 0 20px var(--color2),    0 0 40px var(--color3),    0 0 80px var(--color4);}

2.2 文本動畫效果

基于添加好的陰影效果進一步增加動畫效果，模擬燈光閃爍的效果，在動畫中調整陰影的顏色和大小在一定時間內變化，從而產生動態效果。gg728資訊網——每日最新資訊28at.com

flicker動畫為文本添加了一個顏色和濾鏡的變化效果。在動畫的50%時刻，文本的顏色變為白色，同時增加濾鏡的飽和度和色調發生變化，創建了一種“閃爍”效果。gg728資訊網——每日最新資訊28at.com

will-change: filter, color;filter: saturate(60%);animation: flicker steps(100) var(--interval) 1s infinite;@keyframes flicker {  50% {    color: white;    filter: saturate(200%) hue-rotate(20deg);  }}

3. 懸停效果：增強用戶交互

最后進一步增加用戶的交互體驗，當鼠標懸停的時候增加背景邊框效果。.gd:hover選擇器用于定義當鼠標懸停在元素上時的樣式變化。默認邊框不可見，在這里當鼠標懸停時，--border變量的值從0變為1，給元素添加了邊框效果，從而增強了用戶的交互體驗。gg728資訊網——每日最新資訊28at.com

.back {  border: double calc(var(--border) * 1px) transparent;}.gd:hover {  --border: 1;}

增加懸停交互后的效果：gg728資訊網——每日最新資訊28at.com

圖片gg728資訊網——每日最新資訊28at.com

結語

本文詳細解析了如何利用CSS的來創造炫酷動態漸變背景和霓虹燈文字效果。這種動效不僅對于前端開發者有啟發，也為設計師和內容創作者提供了新的視角，去探索網頁設計的無限可能性。gg728資訊網——每日最新資訊28at.com

通過這段CSS代碼的解析，我們可以看到CSS不僅是用來定義網頁的基本樣式，還可以創建復雜的視覺效果和動畫。這些技術不僅提高了網頁的美觀性，還增強了用戶的交互體驗。隨著前端技術的不斷發展，我們可以期待更多創新的設計和實現，為網頁帶來更加豐富和動態的視覺效果。gg728資訊網——每日最新資訊28at.com

參考

codepen.io/ghaste/pen/NWobwWbcodepen.io/erikjung/pen/XdWEKEgg728資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-37256-0.html純CSS實現炫酷背景霓虹燈文字效果

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 萬字長文帶你徹底吃透Spring循環依賴，堪稱全網最全（文末福利）

下一篇： 面試過程中常見的排序算法問題你見個？附常見排序算法源代碼