您好,登錄后才能下訂單哦!
今天小編給大家分享一下如何用css做極光效果的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
使用 CSS 可以實(shí)現(xiàn)極光嗎?
像是這樣:
emmm,這有點(diǎn)難為人了。不過,最近我也嘗試著去試了下,雖然不可能模擬出那么真實(shí)的效果,但是使用 CSS 還是可以作出類似的一些特效的,今天我們就一起來嘗試下。
觀察了一些極光的圖片之后,我發(fā)現(xiàn)了極光動畫中一些比較重要的元素:
基于深色背景的明亮漸變色彩
類似于水波流動的動畫效果
明亮漸變色彩我們可以盡量使用 漸變 模擬。而水波流動的動畫效果,在 SVG 濾鏡中 feturbulence 就是專門干這個的,這個濾鏡的使用在我過去的多篇文章中也有反復(fù)的提及過。
而除了漸變、SVG 的 <feturbulence>
濾鏡之外,我們可能還會用到混合模式(mix-blend-mode
)、CSS 濾鏡等提升效果。
OK,有了大概的思路后,剩下的就是不斷的嘗試。
首先,我們可能需要一個深色的背景,用于表示我們的夜空。同時點(diǎn)綴一些星星,星星可以使用 box-shadow
模擬,這樣,一副夜空背景我們可以在 1 個 p 內(nèi)完成:
<p class="g-wrap"> </p>
@function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } @function shadowSet($n, $size) { $shadow : 0 0 0 0 #fff; @for $i from 0 through $n { $x: randomNum(350); $y: randomNum(500); $scale: randomNum($size) / 10; $shadow: $shadow, #{$x}px #{$y}px 0 #{$scale}px rgba(255, 255, 255, .8); } @return $shadow; } .g-wrap { position: relative; width: 350px; height: 500px; background: #0b1a3a; overflow: hidden; &::before { content: ""; position: absolute; width: 1px; height: 1px; border-radius: 50%; box-shadow: shadowSet(100, 6); }
這一步比較簡單,借助了 SASS 之后,我們能夠得到這樣一幅夜空背景圖:
接下來,就是利用漸變,畫出極光的一個輪廓效果。
其實(shí)就是一個徑向漸變:
<p class="g-wrap"> <p class="g-aurora"></p> </p>
.g-aurora { width: 400px; height: 300px; background: radial-gradient( circle at 100% 100%, transparent 45%, #bd63c1 55%, #53e5a6 65%, transparent 85% ); }
目前看來,是有一點(diǎn)點(diǎn)輪廓了。下一步,我們把得到的這個漸變效果通過旋轉(zhuǎn)拉伸變換一下。
.g-aurora { ... transform: rotate(45deg) scaleX(1.4); }
我們大概就能得到這樣一個效果:
到這里,其實(shí)雛形已經(jīng)出來了。但是顏色看著不太像,為了和深色的背景融合在一起,這里我們運(yùn)用上混合模式 mix-blend-mode
。
.g-aurora { ... transform: rotate(45deg) scaleX(1.4); mix-blend-mode: color-dodge; }
神奇的事情發(fā)生了,看看效果:
整體的顏色看上去更加像極光的顏色。
接下來,我們要產(chǎn)生水紋波動的效果,需要借助 SVG 的 <feturbulence>
濾鏡
我們添加一個 SVG 的 <feturbulence>
濾鏡,利用 CSS filter
進(jìn)行引用
<p class="g-wrap"> <p class="g-aurora"></p> </p> <svg id='blob' version='1.1' xmlns='http://www.w3.org/2000/svg'> <defs> <filter id='wave'> <feturbulence basefrequency='0.003 0.003 id='turbulence' numoctaves='3' result='noise' seed='10' /> <fedisplacementmap id='displacement' in2='noise' in='SourceGraphic' scale='96' /> </filter> </defs> </svg>
.g-aurora { ... transform: rotate(45deg) scaleX(1.4); mix-blend-mode: color-dodge; filter: url(#wave); }
我們即可得到這樣一種效果:
Wow,是不是已經(jīng)很有那種感覺了。通過 feturbulence 的特性,我們近乎模擬出了極光的效果!
最后一步,我們就需要讓我們的極光動起來。由于 SVG 動畫本身不支持類似 animation-fill-mode: alternate
這種特性。我們還是需要寫一點(diǎn) JavaScript 代碼,控制動畫的整體循環(huán)。
大概的代碼是這樣:
var filter = document.querySelector("#turbulence"); var frames = 0; var rad = Math.PI / 180; function freqAnimation() { bfx = 0.005; bfy = 0.005; frames += .5 bfx += 0.0025 * Math.cos(frames * rad); bfy += 0.0025 * Math.sin(frames * rad); bf = bfx.toString() + ' ' + bfy.toString(); filter.setAttributeNS(null, 'baseFrequency', bf); window.requestAnimationFrame(freqAnimation); } window.requestAnimationFrame(freqAnimation);
至此,我們就得到了一幅完整的,會動的極光動畫:
漸變元素的周圍會存在明顯的邊界毛刺效果,可以使用黑色內(nèi)陰影 box-shadow: inset ...
去除;
實(shí)際行文過程中的各個屬性的實(shí)際參數(shù)看似簡單,過程中其實(shí)經(jīng)過了不斷的調(diào)試才得到;
混合模式及 SVG 的 feturbulence 濾鏡比較難掌握,需要不斷的練習(xí),不斷的調(diào)試;本文極光的顏色選取沒有經(jīng)過太多反復(fù)調(diào)試,愿意花時間,可以調(diào)試出效果更好的顏色。
以上就是“如何用css做極光效果”這篇文章的所有內(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)容。