久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長(zhǎng)資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      鮮為人知!用css做極光效果

      本篇文章給大家分享使用css實(shí)現(xiàn)極光效果,其中主要步驟包括繪制深色背景、使用漸變畫(huà)出極光的輪廓、旋轉(zhuǎn)拉伸等等相關(guān)問(wèn)題,希望對(duì)大家有幫助。

      鮮為人知!用css做極光效果

      使用 CSS 可以實(shí)現(xiàn)極光嗎?

      像是這樣:

      鮮為人知!用css做極光效果

      emmm,這有點(diǎn)難為人了。不過(guò),最近我也嘗試著去試了下,雖然不可能模擬出那么真實(shí)的效果,但是使用 CSS 還是可以作出類(lèi)似的一些特效的,今天我們就一起來(lái)嘗試下。

      觀察了一些極光的圖片之后,我發(fā)現(xiàn)了極光動(dòng)畫(huà)中一些比較重要的元素:

      1. 基于深色背景的明亮漸變色彩

      2. 類(lèi)似于水波流動(dòng)的動(dòng)畫(huà)效果

      明亮漸變色彩我們可以盡量使用 漸變 模擬。而水波流動(dòng)的動(dòng)畫(huà)效果,在 SVG 濾鏡中 feturbulence 就是專(zhuān)門(mén)干這個(gè)的,這個(gè)濾鏡的使用在我過(guò)去的多篇文章中也有反復(fù)的提及過(guò)。

      而除了漸變、SVG 的 <feturbulence> 濾鏡之外,我們可能還會(huì)用到混合模式mix-blend-mode)、CSS 濾鏡等提升效果。

      OK,有了大概的思路后,剩下的就是不斷的嘗試。

      Step 1. 繪制深色背景

      首先,我們可能需要一個(gè)深色的背景,用于表示我們的夜空。同時(shí)點(diǎn)綴一些星星,星星可以使用 box-shadow 模擬,這樣,一副夜空背景我們可以在 1 個(gè) 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); }

      這一步比較簡(jiǎn)單,借助了 SASS 之后,我們能夠得到這樣一幅夜空背景圖:

      鮮為人知!用css做極光效果

      Step 2. 使用漸變畫(huà)出極光的輪廓

      接下來(lái),就是利用漸變,畫(huà)出極光的一個(gè)輪廓效果。

      其實(shí)就是一個(gè)徑向漸變:

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

      鮮為人知!用css做極光效果

      Step 3. 旋轉(zhuǎn)拉伸

      目前看來(lái),是有一點(diǎn)點(diǎn)輪廓了。下一步,我們把得到的這個(gè)漸變效果通過(guò)旋轉(zhuǎn)拉伸變換一下。

      .g-aurora {     ...     transform: rotate(45deg) scaleX(1.4); }

      我們大概就能得到這樣一個(gè)效果:

      鮮為人知!用css做極光效果

      Step 4. 神奇的混合模式變換!

      到這里,其實(shí)雛形已經(jīng)出來(lái)了。但是顏色看著不太像,為了和深色的背景融合在一起,這里我們運(yùn)用上混合模式 mix-blend-mode。

      .g-aurora {     ...     transform: rotate(45deg) scaleX(1.4);     mix-blend-mode: color-dodge; }

      神奇的事情發(fā)生了,看看效果:

      鮮為人知!用css做極光效果

      image

      整體的顏色看上去更加像極光的顏色。

      Step 5. 疊加 SVG feturbulence 濾鏡

      接下來(lái),我們要產(chǎn)生水紋波動(dòng)的效果,需要借助 SVG 的 <feturbulence> 濾鏡

      我們添加一個(gè) 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); }

      我們即可得到這樣一種效果:

      鮮為人知!用css做極光效果

      Wow,是不是已經(jīng)很有那種感覺(jué)了。通過(guò) feturbulence 的特性,我們近乎模擬出了極光的效果!

      Step 6. 讓極光動(dòng)起來(lái)

      最后一步,我們就需要讓我們的極光動(dòng)起來(lái)。由于 SVG 動(dòng)畫(huà)本身不支持類(lèi)似 animation-fill-mode: alternate 這種特性。我們還是需要寫(xiě)一點(diǎn) JavaScript 代碼,控制動(dòng)畫(huà)的整體循環(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);

      至此,我們就得到了一幅完整的,會(huì)動(dòng)的極光動(dòng)畫(huà):

      鮮為人知!用css做極光效果

      一些技巧及其他事項(xiàng)

      1. 漸變?cè)氐闹車(chē)鷷?huì)存在明顯的邊界毛刺效果,可以使用黑色內(nèi)陰影 box-shadow: inset ... 去除;

      2. 實(shí)際行文過(guò)程中的各個(gè)屬性的實(shí)際參數(shù)看似簡(jiǎn)單,過(guò)程中其實(shí)經(jīng)過(guò)了不斷的調(diào)試才得到;

      3. 混合模式及 SVG 的 feturbulence 濾鏡比較難掌握,需要不斷的練習(xí),不斷的調(diào)試;本文極光的顏色選取沒(méi)有經(jīng)過(guò)太多反復(fù)調(diào)試,愿意花時(shí)間,可以調(diào)試出效果更好的顏色。

      最終的效果,不太完美,但也算一副不錯(cuò)的 CSS + SVG 作品。完整的代碼,你可以看這里:

      (學(xué)習(xí)視頻分享:css視頻教程)

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)