如下圖所示，這是一個(gè)很炫酷的霓虹燈文字效果且背景炫酷，就像很多個(gè)燈光閃爍著不同的顏色。

本次文章將解析如何用CSS代碼實(shí)現(xiàn)這個(gè)效果，根據(jù)上面的動(dòng)圖分析出我們要實(shí)現(xiàn)的幾個(gè)主要功能點(diǎn)：

• 整個(gè)背景中有平均分布的小點(diǎn)襯托中心區(qū)域
• 文字閃爍效果如同霓虹燈一樣
• 文字背景呈多個(gè)平均分布的亮點(diǎn)
• 背景亮點(diǎn)的顏色整體呈現(xiàn)漸變色變化

1. 默認(rèn)背景色

首先我們來看看如何通過CSS創(chuàng)建一個(gè)多個(gè)小點(diǎn)背景效果。

1.1 設(shè)置根元素變量

在:root偽類中，定義了一系列的CSS變量，這些變量在整個(gè)文檔中都是可用的。例如，--rotate用于控制旋轉(zhuǎn)動(dòng)畫的角度，而--radius、--bg、--width等用于定義背景和形狀的基本屬性。

: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 設(shè)計(jì)背景樣式

在body標(biāo)簽中設(shè)置了背景的基礎(chǔ)樣式，使用了徑向漸變（radial-gradient）來創(chuàng)建一種特殊的紋理效果。配合 background-size 和 background-position 即可完成默認(rèn)的背景效果。

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;
}

此時(shí)的背景效果如下：

2. 創(chuàng)建漸變背景旋轉(zhuǎn)效果

2.1 旋轉(zhuǎn)動(dòng)畫的實(shí)現(xiàn)

新增.back類利用conic-gradient來創(chuàng)建一個(gè)彩色圓環(huán)效果，而--rotate變量控制著這個(gè)圓環(huán)的旋轉(zhuǎn)。這種效果通過@keyframes spin動(dòng)畫實(shí)現(xiàn)，其中--rotate的值在一定周期內(nèi)從0deg變化到360deg，實(shí)現(xiàn)了一個(gè)完整的旋轉(zhuǎn)周期。

.back?{
??//?背景圖像和漸變?cè)O(shè)置
??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;?}
}

如果這里僅設(shè)置 conic-gradient 并配合 animation 動(dòng)畫的效果就是下面的樣子：

但是再增加一個(gè) radial-gradient 徑向漸變并設(shè)置 background-size 為 5vmin 5vmin 的顯示區(qū)域。

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

完成后的效果圖：

這里需要注意的一點(diǎn)就是多個(gè)漸變?cè)O(shè)置的順序，這里的 conic-gradient 要放置在后面才能完成這個(gè)效果。這種旋轉(zhuǎn)效果不僅增加了頁(yè)面的視覺吸引力，而且通過顏色的流動(dòng)變換，為用戶提供了一種動(dòng)態(tài)的互動(dòng)體驗(yàn)。它不僅是一種美學(xué)上的選擇，也展示了CSS動(dòng)畫和漸變的強(qiáng)大功能。

3. 霓虹燈文字效果

接下來探討如何實(shí)現(xiàn)背景中的霓虹燈文字效果。

3.1 文本的動(dòng)態(tài)陰影效果

通過設(shè)置text-shadow屬性，并使用自定義變量--color1到--color4，為文本創(chuàng)建了動(dòng)態(tài)的陰影效果。

.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);
}

3.2 文本動(dòng)畫效果

基于添加好的陰影效果進(jìn)一步增加動(dòng)畫效果，模擬燈光閃爍的效果，在動(dòng)畫中調(diào)整陰影的顏色和大小在一定時(shí)間內(nèi)變化，從而產(chǎn)生動(dòng)態(tài)效果。

flicker動(dòng)畫為文本添加了一個(gè)顏色和濾鏡的變化效果。在動(dòng)畫的50%時(shí)刻，文本的顏色變?yōu)榘咨?，同時(shí)增加濾鏡的飽和度和色調(diào)發(fā)生變化，創(chuàng)建了一種“閃爍”效果。

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);
??}
}

4 懸停效果：增強(qiáng)用戶交互

最后進(jìn)一步增加用戶的交互體驗(yàn)，當(dāng)鼠標(biāo)懸停的時(shí)候增加背景邊框效果。.gd:hover選擇器用于定義當(dāng)鼠標(biāo)懸停在元素上時(shí)的樣式變化。默認(rèn)邊框不可見，在這里當(dāng)鼠標(biāo)懸停時(shí)，--border變量的值從0變?yōu)?code>1，給元素添加了邊框效果，從而增強(qiáng)了用戶的交互體驗(yàn)。

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

增加懸停交互后的效果：

結(jié)語(yǔ)

本文詳細(xì)解析了如何利用CSS的來創(chuàng)造炫酷動(dòng)態(tài)漸變背景和霓虹燈文字效果。這種動(dòng)效不僅對(duì)于前端開發(fā)者有啟發(fā)，也為設(shè)計(jì)師和內(nèi)容創(chuàng)作者提供了新的視角，去探索網(wǎng)頁(yè)設(shè)計(jì)的無限可能性。

通過這段CSS代碼的解析，我們可以看到CSS不僅是用來定義網(wǎng)頁(yè)的基本樣式，還可以創(chuàng)建復(fù)雜的視覺效果和動(dòng)畫。這些技術(shù)不僅提高了網(wǎng)頁(yè)的美觀性，還增強(qiáng)了用戶的交互體驗(yàn)。隨著前端技術(shù)的不斷發(fā)展，我們可以期待更多創(chuàng)新的設(shè)計(jì)和實(shí)現(xiàn)，為網(wǎng)頁(yè)帶來更加豐富和動(dòng)態(tài)的視覺效果。

到此這篇關(guān)于CSS實(shí)現(xiàn)炫酷背景霓虹燈文字效果的示例代碼的文章就介紹到這了,更多相關(guān)CSS霓虹燈文字效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論