Kesan asap kabur dan berbutir juga boleh dicapai dengan CSS tulen!

Kesan asap kabur dan berbutir juga boleh dicapai dengan CSS tulen Dalam artikel ini, kita akan melihat langkah demi langkah jika kita boleh mencapai beberapa kesan asap menggunakan CSS tulen.

Seperti ini:

Lihat dengan teliti pada kesan asap, terdapat dua ciri penting:

• Kabur kesan
• Berbutir

Mula-mula lihat kesan kabur Apabila memikirkan tentang kabur, kebanyakan pelajar mula-mula akan terfikir untuk menggunakan filter: blur().

Sudah tentu itu benar, tetapi dalam CSS, sebagai tambahan kepada penapis, kita juga boleh menggunakan jenis cara lain untuk mensimulasikan kesan kabur.

CSS tulen untuk melaksanakan animasi asap

Mari kita lihat dahulu kesan ini:

Andaikan, kita ada Perwatakan sedemikian:

<span>C</span>

Kita boleh mensimulasikan kesan asap hanya dengan menukar text-shadow opacity:

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}

@keyframes smoky {
  to {
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

Lihat kesannya:

Berdasarkan perkara di atas, kita boleh menambah anjakan, putaran, penskalaan, mengubah sedikit kod di atas, menambah beberapa transform transformasi:

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

Itu sahaja. Anda boleh mendapatkan kesan berikut:

Selepas menindih transform, rasa seperti diterbangkan satu perkataan dan bertukar menjadi asap. Atas dasar ini, kita hanya perlu menyusun berbilang perkataan dan menggunakan animation-delay untuk mengawal setiap perkataan secara berurutan untuk mencetuskan kesan animasi untuk mendapatkan kesan asap lengkap yang dinyatakan di atas.

Kod pseudo adalah seperti berikut:

    <span>C</span>
    S
    S
    // ...

// ... 上述所有 CSS 代码

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(($item/10))}s; 
  }
}

Anda boleh mendapatkan kesan perkataan yang diterbangkan angin dan bertukar menjadi asap:

Kesan di atas tidak asli kepada saya pertama kali dilihat oleh pengarang ini - CodePen Demo - Smoky Text Oleh Bennett Feely

https://codepen.io/. bennettfeely/pen/lgybC

Gunakan penapis janin SVG untuk mencapai kesan asap

Asap dalam animasi asap di atas masih agak kasar. Terutamanya kerana ia tidak mempunyai sedikit butiran? Beberapa tekstur asap hilang.

Untuk mencapai kesan asap yang lebih halus, kita perlu menggunakan penapis <feturbulence></feturbulence> SVG

Seterusnya, kami akan menggunakan filter: blur() dengan penapis <feturbulence></feturbulence> untuk mendapatkan kesan asap yang lebih Realistik .

Sebagai contoh mudah, katakan terdapat beberapa perkataan seperti ini:

<div">SMOKE</div>

CSS ringkas:

div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

Dapatkan beberapa perkataan dengan warna kecerunan seperti ini:

Mari gunakan penapis <feturbulence></feturbulence> untuk melakukan proses mudah:

<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 menggunakan filter: url() untuk memperkenalkan penapis ini, di sini untuk kesannya Lebih baik lagi, saya memperkenalkan penapis terus pada :

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

Fon kami diberi rasa cair oleh penapis <feturbulence></feturbulence>:

Boleh dikatakan bahawa kesan ini pada asasnya tiada kaitan dengan kesan asap, tetapi anda hanya perlu menambah penapis kabur, dan sesuatu yang ajaib berlaku:

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
    filter: blur(5px);
}

Kesan keseluruhan adalah serta-merta Asap telah menjadi banyak:

Baiklah, tambahkan kesan animasi gelung padanya dan hanya gunakan JavaScript untuk memprosesnya:

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

Lihat kesannya:

Untuk kod lengkap di atas, anda boleh klik di sini: CodePen CSS SVG Text Smoke Effect

https: // codepen.io/Chokcoco/pen/wvrrwVM

Sudah tentu, kesan di atas boleh dikawal oleh:

• Kawalan<feturbulence></feturbulence>'s baseFrequency pelarasan atribut

• Kawal pelarasan atribut <feturbulence></feturbulence> numOctaves

• Kawal pelarasan atribut <fedisplacementmap></fedisplacementmap> scale

Tukar atribut <feturbulence></feturbulence> numOctaves daripada 30 kepada 70. Pada asasnya, garis besar teks tidak dapat dilihat dan teks telah diatomkan sepenuhnya. Kita boleh mencipta kesan tuding seperti ini:

Untuk kod lengkap di atas, anda boleh klik di sini: CodePen CSS SVG Text Smoke Hover Effect

https://codepen.io/Chokcoco/pen / Jjrrojj

Dengan cara ini, berdasarkan filter: blur() dan penapis <feturbulence></feturbulence>, kita boleh mendapatkan kesan asap yang sangat realistik Berdasarkan demonstrasi di atas, kita juga boleh meneroka banyak kesan menarik. Artikel ini akan Tiada butiran lanjut.

Akhirnya

Baiklah, ini adalah penghujung artikel ini, semoga artikel ini dapat membantu anda:)

(Belajar perkongsian video : tutorial video css)

Atas ialah kandungan terperinci Kesan asap kabur dan berbutir juga boleh dicapai dengan CSS tulen!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!