Membuat bunyi statik dari bug kecerunan CSS yang pelik

Artikel ini meneroka bug kecerunan CSS yang unik yang menghasilkan kesan bunyi statik, sama dengan skrin TV lama dengan penerimaan yang buruk. Walaupun bukan teknik siap pengeluaran, ia adalah percubaan CSS yang menyeronokkan.

Penulis mencatatkan bahawa kaedah yang lebih baik wujud (SVG, kanvas, penapis), tetapi pendekatan ini memanfaatkan anti-aliasing miskin kecerunan. "Trick" melibatkan memanipulasi kecerunan konik dan radial dengan nilai berhenti warna yang sangat kecil, mewujudkan tekstur berbulu. Kesannya sangat bergantung kepada penyemak imbas; Chrome, Edge, dan Firefox disyorkan.

Artikel menunjukkan bagaimana pelarasan halus kepada nilai kecerunan secara dramatik mengubah output visual. Dengan menggunakan nilai perpuluhan kecil (mis., 0.0001%), kecerunan itu sendiri menjadi hampir tidak kelihatan, hanya meninggalkan bunyi kasar. Rawak selanjutnya dicapai dengan mengukur kecerunan dan menyesuaikan kedudukannya. Menggabungkan kecerunan dengan

menapis kesannya. background-blend-mode

Beberapa aplikasi dipamerkan:

• animasi "No Signal": animasi CSS secara halus mengalihkan kedudukan kecerunan, meniru statik berkedip.
• Penapis imej kasar: Bunyi digunakan sebagai elemen pseudo, dicampur dengan imej menggunakan untuk kesan vintaj. Penapis CSS meningkatkan lagi ini. mix-blend-mode: overlay
• teks kasar: Teknik ini digunakan untuk teks, menggunakan untuk mengurung kesan ke sempadan watak. background-clip
• Seni generatif: Bereksperimen dengan nilai kecerunan menghasilkan corak seni yang hampir tidak dijangka, hampir generatif.

Artikel ini menyimpulkan dengan menekankan bahawa kaedah ini terutama untuk percubaan dan keseronokan, bukan untuk penggunaan pengeluaran kerana ketidakstabilan dan ketidakkonsistenan penyemak imbasnya. Pembaca digalakkan untuk meneroka variasi dan berkongsi hasilnya.

Atas ialah kandungan terperinci Membuat bunyi statik dari bug kecerunan CSS yang pelik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!