建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
如圖所示，這是一個(gè)很炫酷的霓虹燈文字效果且背景炫酷，就像很多個(gè)燈光閃爍著不同的顏色。
成都創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)10年來(lái)致力于為客戶提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、成都全網(wǎng)營(yíng)銷(xiāo)、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過(guò)多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了1000+網(wǎng)站，包括各類(lèi)中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。
本次文章將解析如何用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)背景色
首先我們來(lái)看看如何通過(guò)CSS創(chuàng)建一個(gè)多個(gè)小點(diǎn)背景效果。
1.1 設(shè)置根元素變量
在:root偽類(lèi)中，定義了一系列的CSS變量，這些變量在整個(gè)文檔中都是可用的。例如，--rotate用于控制旋轉(zhuǎn)動(dòng)畫(huà)的角度，而--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）來(lái)創(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)畫(huà)的實(shí)現(xiàn)
新增.back類(lèi)利用conic-gradient來(lái)創(chuàng)建一個(gè)彩色圓環(huán)效果，而--rotate變量控制著這個(gè)圓環(huán)的旋轉(zhuǎn)。這種效果通過(guò)@keyframes spin動(dòng)畫(huà)實(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)畫(huà)的效果就是下面的樣子：
圖片
但是再增加一個(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è)面的視覺(jué)吸引力，而且通過(guò)顏色的流動(dòng)變換，為用戶提供了一種動(dòng)態(tài)的互動(dòng)體驗(yàn)。它不僅是一種美學(xué)上的選擇，也展示了CSS動(dòng)畫(huà)和漸變的強(qiáng)大功能。
2. 霓虹燈文字效果
接下來(lái)探討如何實(shí)現(xiàn)背景中的霓虹燈文字效果。
2.1 文本的動(dòng)態(tài)陰影效果
通過(guò)設(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);
}2.2 文本動(dòng)畫(huà)效果
基于添加好的陰影效果進(jìn)一步增加動(dòng)畫(huà)效果，模擬燈光閃爍的效果，在動(dòng)畫(huà)中調(diào)整陰影的顏色和大小在一定時(shí)間內(nèi)變化，從而產(chǎn)生動(dòng)態(tài)效果。
flicker動(dòng)畫(huà)為文本添加了一個(gè)顏色和濾鏡的變化效果。在動(dòng)畫(huà)的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);
}
}3. 懸停效果：增強(qiáng)用戶交互
最后進(jìn)一步增加用戶的交互體驗(yàn)，當(dāng)鼠標(biāo)懸停的時(shí)候增加背景邊框效果。.gd:hover選擇器用于定義當(dāng)鼠標(biāo)懸停在元素上時(shí)的樣式變化。默認(rèn)邊框不可見(jiàn)，在這里當(dāng)鼠標(biāo)懸停時(shí)，--border變量的值從0變?yōu)?，給元素添加了邊框效果，從而增強(qiáng)了用戶的交互體驗(yàn)。
.back {
border: double calc(var(--border) * 1px) transparent;
}
.gd:hover {
--border: 1;
}增加懸停交互后的效果：
圖片
結(jié)語(yǔ)
本文詳細(xì)解析了如何利用CSS的來(lái)創(chuàng)造炫酷動(dòng)態(tài)漸變背景和霓虹燈文字效果。這種動(dòng)效不僅對(duì)于前端開(kāi)發(fā)者有啟發(fā)，也為設(shè)計(jì)師和內(nèi)容創(chuàng)作者提供了新的視角，去探索網(wǎng)頁(yè)設(shè)計(jì)的無(wú)限可能性。
通過(guò)這段CSS代碼的解析，我們可以看到CSS不僅是用來(lái)定義網(wǎng)頁(yè)的基本樣式，還可以創(chuàng)建復(fù)雜的視覺(jué)效果和動(dòng)畫(huà)。這些技術(shù)不僅提高了網(wǎng)頁(yè)的美觀性，還增強(qiáng)了用戶的交互體驗(yàn)。隨著前端技術(shù)的不斷發(fā)展，我們可以期待更多創(chuàng)新的設(shè)計(jì)和實(shí)現(xiàn)，為網(wǎng)頁(yè)帶來(lái)更加豐富和動(dòng)態(tài)的視覺(jué)效果。
參考
codepen.io/ghaste/pen/NWobwWbcodepen.io/erikjung/pen/XdWEKE
新聞標(biāo)題：純CSS實(shí)現(xiàn)炫酷背景霓虹燈文字效果
網(wǎng)站地址：http://m.fisionsoft.com.cn/article/copscip.html
