Penggunaan bijak CSS MASK filter_Tutorial asas

Penapis Topeng boleh mencipta topeng segi empat tepat untuk objek elemen HTML pada halaman web Apakah topeng Jika anda telah menggunakan topeng dalam Flash, anda akan tahu bahawa ia adalah seperti itu. Malah, anda juga boleh memahami masking dengan cara ini, yang setara dengan menutup objek dengan sehelai kain berwarna, tetapi kandungannya digali. Jika anda masih tidak faham, lihat sahaja gambar di bawah dan biar saya jelaskan kepada anda secara terperinci.

Rajah 1 Kesan penapis topeng 1

Menggunakan warna gelap dalam penapis topeng di atas adalah terutamanya supaya anda dapat melihat dengan jelas kesannya. Mari kita lihat parameter penapis topeng: Ia hanya mempunyai satu parameter Warna, iaitu nilai warna topeng dalam format #RRGGBB. Anda hanya perlu memilih warna yang sesuai untuknya dalam DW3 Contohnya, kod penapis topeng di atas ialah: .mask1 { filter:mask(color=#00ff00) }. warna penapis bukan perkara utama, yang penting ialah warna latar belakang.
Seterusnya kami menggunakan penapis topeng untuk mencipta beberapa kesan khas:
1. Teks berwarna-warni

Rajah 2 Kesan penapis topeng 2

Bagaimana dengan kesan di atas? tidak teruk! Ia agak seperti imej, bukan? Ini adalah kesan penapis topeng. Penapis putih digunakan di sini dan kodnya ialah: .mask1 { filter:mask(color=#ffffff) }. Warna teks yang berwarna-warni sebenarnya adalah warna latar belakang. Kaedah pengeluaran juga sangat mudah, hanya masukkan jadual 1*1, tambahkan latar belakang berbilang warna pada jadual, masukkan teks dalam jadual, muatkan penapis topeng ke sel, dan anda sudah selesai, bukan? !
2. Kesan animasi lampu carian
Kesan lampu carian di bawah memerlukan banyak usaha untuk menggunakan Flash, tetapi saya tidak sangka ia juga boleh dilakukan menggunakan penapis CSS! Memandangkan kesan lampu carian adalah dinamik, saya hanya boleh menangkap dua gambar proses untuk anda lihat Jika anda ingin melihat kesan dinamik, maka anda boleh membuat satu mengikut apa yang saya katakan atau pergi ke rumah saya (http://fym888. pergi.163.com) lihat.

Rajah 3 Kesan animasi Searchlight 1

Rajah 4 Kesan animasi Searchlight 2

Berikut ialah kaedah pengeluaran:
Kesan ini lebih baik daripada di atas Contoh adalah sedikit lebih rumit, tetapi ia hanya memerlukan beberapa klik lagi tetikus.
1. Masukkan satu lapisan, yang saya panggil "lapisan induk". Lapisan ini digunakan untuk meletakkan kandungan (teks atau gambar) untuk dipaparkan. Masukkan lapisan di atas lapisan ini, yang saya panggil sublapisan, dan ia digunakan terutamanya untuk mencipta kesan penyamaran.
2. Tetapkan tetingkap paparan pada panel sifat lapisan induk, iaitu, tetapkan atribut "Klip" lapisan Dalam atribut ini, koordinat relatif digunakan, di mana: L dan T ialah koordinat bagi sudut kiri atas; R dan B ialah koordinat sudut kanan bawah. Sublapisan berikutnya hanya akan dipaparkan dalam tetingkap yang anda tetapkan. Panel parameter atribut lapisan yang ditetapkan adalah seperti yang ditunjukkan dalam rajah di bawah:

Rajah 5 Panel atribut lapisan

Lapisan induk saya di sini ialah "Layer4", dan saya menetapkan keseluruhan lapisan induk di sini. Sebagai tetingkap paparan, ia kelihatan apabila lapisan anak bergerak ke lapisan induk, tetapi tidak kelihatan di luar lapisan induk.
3. Kami menyisipkan imej bulat dengan latar belakang lutsinar pada sub-layer Tujuan utama penggunaan imej bulat di sini ialah tayangan lampu carian adalah seperti bulatan mesti telus, jika tidak kelihatan Ia akan menjadi kotak segi empat tepat yang bergerak. Kemudian muatkan penapis topeng dengan warna yang sama dengan warna latar belakang lapisan induk pada lapisan anak, dan besarkan lapisan anak supaya ia dapat menutup sepenuhnya kandungan lapisan induk, supaya kandungan pada lapisan induk dalam penyemak imbas hanya akan berbentuk bulat.
4. Sudah tentu, untuk menghasilkan kesan lampu carian, anda perlu membuat kawasan bulatan ini perlu menggunakan fungsi Garis Masa Dreamweaver. Dalam DW3, mula-mula seret ke sub-lapisan supaya gambar di atasnya hanya meliputi kepala kandungan lapisan induk Tekan "Ctrl+F9" untuk memaparkan panel garis masa, seret sub-lapisan ke panel garis masa dan. seret bingkai terakhir ke bingkai 100, masukkan bingkai utama pada bingkai 50, dan tindih gambar sub-lapisan dengan ekor kandungan lapisan induk Pilih "Gelung" (main balik gelung) dan "Auto" (main balik automatik) pada garis masa panel. Semuanya OK.
Animasi kompleks telah selesai Tekan F12 untuk melihatnya. !