您好,登錄后才能下訂單哦!
小編給大家分享一下CSS如何實(shí)現(xiàn)模糊顆粒感的煙霧效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
像是這樣:
仔細(xì)觀察煙霧效果,有兩個(gè)比較重要的特點(diǎn):
模糊效果
顆粒感
首先看模糊效果,想到模糊,大部分同學(xué)首先都會想到使用 filter: blur()
。
當(dāng)然沒錯,不過在 CSS 中,除了濾鏡,我們還能使用一類其他手段去模擬模糊的效果。
我們首先來看這樣一個(gè)效果:
假設(shè),我們有這樣一個(gè)字符:
<span>C</span>
我們僅僅是通過 text-shadow
+ opacity
的變化,就能模擬煙霧的效果:
span { text-shadow: 0 0 0 whitesmoke; animation: smoky 5s; } @keyframes smoky { to { text-shadow: 0 0 20px whitesmoke; opacity: 0; } }
看看效果:
在上述的基礎(chǔ)上,我們可以加上位移、旋轉(zhuǎn)、縮放,稍微改造一下上述代碼,添加一些 transform
變換:
span { text-shadow: 0 0 0 whitesmoke; animation: smoky 5s; } @keyframes smoky { to { transform: translate3d(200px, -80px, 0) rotate(-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px whitesmoke; opacity: 0; } }
就可以得到如下效果:
疊加了 transform
之后,就很有一個(gè)字被吹跑,變成煙霧的感覺。在此基礎(chǔ)之上,我們只需要將多個(gè)字放在一起,利用 animation-delay
順序控制每個(gè)字觸發(fā)動畫效果,即可得到上述的完整煙霧效果。
偽代碼如下:
<div> <span>C</span> <span>S</span> <span>S</span> // ... </div>
// ... 上述所有 CSS 代碼 @for $item from 1 through 21 { span:nth-of-type(#{$item}){ animation-delay: #{(($item/10))}s; } }
就可以得到這樣一個(gè)被風(fēng)吹跑的字,幻化成煙霧的效果:
上述效果并非我原創(chuàng),最早見于這位作者 -- CodePen Demo -- Smoky Text By Bennett Feely
https://codepen.io/bennettfeely/pen/lgybC
上述的煙霧動畫的煙霧還是比較粗糙的。主要是缺少了一點(diǎn)顆粒感?缺少了一些煙霧的質(zhì)感。
想要實(shí)現(xiàn)更為精致的煙霧效果,我們還得借助 SVG 的 <feturbulence>
濾鏡
接下來會使用 filter: blur()
配合 <feturbulence>
濾鏡,得到更為逼真的煙霧效果。
舉個(gè)簡單的例子,假設(shè)有這樣幾個(gè)字:
<div">SMOKE</div>
簡單的 CSS:
div { background: linear-gradient(#fff, #999, #ddd, #888); background-clip: text; }
得到這樣幾個(gè)帶漸變色字:
我們利用 <feturbulence>
濾鏡簡單處理一下:
<div>SMOKE</div> <svg width="0"> <filter id="filter"> <feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" /> <feDisplacementMap in="SourceGraphic" scale="30" /> </filter> </svg>
CSS 的中利用 filter: url()
引入該濾鏡,這里為了效果更好,我直接在 <body>
上引入了該濾鏡:
body { filter: url('#filter'); } div { background: linear-gradient(#fff, #999, #ddd, #888); background-clip: text; }
我們的字體就被 <feturbulence>
濾鏡 賦予了一種流體的感覺:
這個(gè)效果可以說和煙霧效果基本沒什么關(guān)系,不過只需要再添加一個(gè)模糊濾鏡,神奇的事情就發(fā)生了:
body { filter: url('#filter'); } div { background: linear-gradient(#fff, #999, #ddd, #888); background-clip: text; filter: blur(5px); }
整個(gè)效果就瞬間煙霧化了很多:
好,給它添加上循環(huán)的動畫效果,簡單的借助 JavaScript 處理一下:
const filter = document.querySelector("#turbulence"); let frames = 1; let rad = Math.PI / 180; let bfx, bfy; function freqAnimation() { frames += .2 bfx = 0.03; bfy = 0.03; bfx += 0.005 * Math.cos(frames * rad); bfy += 0.005 * Math.sin(frames * rad); bf = bfx.toString() + " " + bfy.toString(); filter.setAttributeNS(null, "baseFrequency", bf); window.requestAnimationFrame(freqAnimation); } window.requestAnimationFrame(freqAnimation);
當(dāng)然,上述效果可以通過:
控制 <feTurbulence>
的 baseFrequency
屬性調(diào)節(jié)
控制 <feTurbulence>
的 numOctaves
屬性調(diào)節(jié)
控制 <feDisplacementMap>
的 scale
屬性調(diào)節(jié)
將 <feTurbulence>
的 numOctaves
屬性由 30 改成 70,基本就看不到文字的輪廓了,文字整個(gè)霧化。我們可以制作類似這樣的 hover 效果:
這樣,基于 filter: blur()
配合 <feturbulence>
濾鏡,我們可以得到非常逼真的煙霧效果,基于上述的演示,我們還可以再挖掘非常多有意思的效果,本文就不再贅述。
以上是“CSS如何實(shí)現(xiàn)模糊顆粒感的煙霧效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。