Bagaimana untuk Meniru Kesan Kabur iOS 7 Menggunakan CSS?

Barbara Streisand
Lepaskan: 2024-11-01 02:35:27
asal
645 orang telah melayarinya

How to Replicate iOS 7's Blur Effect Using CSS?

Kesan Kabur iOS 7 dengan CSS: Pandangan Lebih Dekat

IOS 7 Apple memperkenalkan kesan tindanan kabur yang menarik secara visual. Walaupun ia kelihatan seperti perkara mudah ketelusan, kesan ini melibatkan lebih daripada apa yang dilihat.

Soalan: Bagaimanakah kita boleh meniru kesan ini menggunakan CSS dan, jika perlu, JavaScript?

Jawapan:

CSS 3 menawarkan penyelesaian untuk mencapai kesan ini:

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>
Salin selepas log masuk

Penapis blur() menambah kesan kabur pada elemen, manakala sifat kelegapan mengawal ketelusan. Untuk memperhalusi kesan, percubaan dengan nilai yang berbeza untuk blur() dan kelegapan.

Contoh:

Terokai contoh langsung kod ini dalam tindakan di JSFiddle.

Atas ialah kandungan terperinci Bagaimana untuk Meniru Kesan Kabur iOS 7 Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan