石頭自清潔掃拖機(jī)器人G10S評(píng)測(cè)：多年黑科技集大成之作 懶人終極福音
科技圈經(jīng)常能看到一個(gè)詞叫“縫合怪”，用來形容那些把好多功能或者外觀結(jié)合在一起的產(chǎn)品，通常這樣的詞是貶義詞，但如果真的是產(chǎn)品縫合的好、縫合的實(shí)用的話，那它就成了中性詞，今
如圖所示，這是一個(gè)很炫酷的霓虹燈文字效果且背景炫酷，就像很多個(gè)燈光閃爍著不同的顏色。
本次文章將解析如何用CSS代碼實(shí)現(xiàn)這個(gè)效果，根據(jù)上面的動(dòng)圖分析出我們要實(shí)現(xiàn)的幾個(gè)主要功能點(diǎn)：
首先我們來看看如何通過CSS創(chuàng)建一個(gè)多個(gè)小點(diǎn)背景效果。
在: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;}在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í)的背景效果如下：
圖片
新增.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)效果不僅增加了頁面的視覺吸引力，而且通過顏色的流動(dòng)變換，為用戶提供了一種動(dòng)態(tài)的互動(dòng)體驗(yàn)。它不僅是一種美學(xué)上的選擇，也展示了CSS動(dòng)畫和漸變的強(qiáng)大功能。
接下來探討如何實(shí)現(xiàn)背景中的霓虹燈文字效果。
通過設(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);}基于添加好的陰影效果進(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)榘咨瑫r(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); }}最后進(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)?，給元素添加了邊框效果，從而增強(qiáng)了用戶的交互體驗(yàn)。
.back { border: double calc(var(--border) * 1px) transparent;}.gd:hover { --border: 1;}增加懸停交互后的效果：
圖片
本文詳細(xì)解析了如何利用CSS的來創(chuàng)造炫酷動(dòng)態(tài)漸變背景和霓虹燈文字效果。這種動(dòng)效不僅對(duì)于前端開發(fā)者有啟發(fā)，也為設(shè)計(jì)師和內(nèi)容創(chuàng)作者提供了新的視角，去探索網(wǎng)頁設(shè)計(jì)的無限可能性。
通過這段CSS代碼的解析，我們可以看到CSS不僅是用來定義網(wǎng)頁的基本樣式，還可以創(chuàng)建復(fù)雜的視覺效果和動(dòng)畫。這些技術(shù)不僅提高了網(wǎng)頁的美觀性，還增強(qiáng)了用戶的交互體驗(yàn)。隨著前端技術(shù)的不斷發(fā)展，我們可以期待更多創(chuàng)新的設(shè)計(jì)和實(shí)現(xiàn)，為網(wǎng)頁帶來更加豐富和動(dòng)態(tài)的視覺效果。
codepen.io/ghaste/pen/NWobwWbcodepen.io/erikjung/pen/XdWEKE
本文鏈接：http://www.www897cc.com/showinfo-26-37256-0.html純CSS實(shí)現(xiàn)炫酷背景霓虹燈文字效果
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)