Rumah > hujung hadapan web > tutorial css > Kesan asap kabur dan berbutir juga boleh dicapai dengan CSS tulen!

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

青灯夜游
Lepaskan: 2022-01-11 10:08:35
ke hadapan
3211 orang telah melayarinya

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:

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

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:

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

Andaikan, kita ada Perwatakan sedemikian:

<span>C</span>
Salin selepas log masuk

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;
  }
}
Salin selepas log masuk

Lihat kesannya:

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

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;
  }
}
Salin selepas log masuk

Itu sahaja. Anda boleh mendapatkan kesan berikut:

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

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 // ...
Salin selepas log masuk
// ... 上述所有 CSS 代码

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

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

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

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> SVG

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

Sebagai contoh mudah, katakan terdapat beberapa perkataan seperti ini:

<div">SMOKE</div>
Salin selepas log masuk

CSS ringkas:

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

Dapatkan beberapa perkataan dengan warna kecerunan seperti ini:

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

Mari gunakan penapis <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>
Salin selepas log masuk

CSS menggunakan filter: url() untuk memperkenalkan penapis ini, di sini untuk kesannya Lebih baik lagi, saya memperkenalkan penapis terus pada <body>:

body {
    filter: url(&#39;#filter&#39;);
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}
Salin selepas log masuk

Fon kami diberi rasa cair oleh penapis <feturbulence>:

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

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(&#39;#filter&#39;);
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
    filter: blur(5px);
}
Salin selepas log masuk

Kesan keseluruhan adalah serta-merta Asap telah menjadi banyak:

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

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);
Salin selepas log masuk

Lihat kesannya:

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

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>'s baseFrequency pelarasan atribut

  • Kawal pelarasan atribut <feturbulence> numOctaves

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

Tukar atribut <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:

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

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>, 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!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan