Nota kajian tentang penapis dalam CSS3 (penapis statik dan penapis dinamik)

Bahagian ini memperkenalkan penapis dalam CSS, termasuk cara menggunakan penapis statik dan penapis dinamik Rakan yang tidak faham boleh merujuk perkara berikut:

1. Gaya penapis statik CSS. (penapis) (hanya disokong oleh IE4.0 ke atas)

Cara menggunakan gaya penapis statik CSS: { filter : filtername( parameters1, parameters2 , .. .) }

Penjelasan ringkas gaya penapis Parameter yang disokong

alfa: Tetapkan kelegapan, finishOpacity, gaya, startX, startY, finishX imej atau teks , finishY, tambah, arah, kekuatan

kabur: Menghasilkan kesan kabur dinamik dalam arah dan kedudukan yang ditentukan tambah, arah, kekuatan

kroma: Untuk yang dipilih Jadikan warna lutsinar warna

dropShadow: Hasilkan bayang-bayang dalam arah dan warna kedudukan yang ditentukan, offX, offY, positif

flipH: Balikkan objek ke arah mendatar

flipV: Balikkan objek dalam arah menegak

cahaya: Warna dan kekuatan cahaya di sekeliling objek

kelabu: Proses objek dalam skala kelabu

terbalikkan: Terbalikkan warna objek

cahaya: Simulasi pencahayaan pada objek

topeng: Hasilkan warna topeng pada objek

bayangan: menjana warna bayang-bayang, arah di sepanjang tepi objek

gelombang: menjana tambah bentuk gelombang sinus, freq, cahayaKekuatan, fasa, kekuatan dalam arah menegak

xray: Tukar kedalaman warna objek dan lukis imej hitam putih

Di atas ialah keseluruhan kandungan penapis statik Sila ambil perhatian bahawa CSS adalah sensitif huruf besar-kecil.

2. Penapis dinamik CSS

Penapis dinamik boleh menambah kesan penjelmaan dan perubahan imej yang bergerak pada halaman tersebut boleh dibahagikan kepada Terdapat dua jenis campuran dan mendedahkan Yang pertama boleh membuat objek secara beransur-ansur hilang atau muncul, dan yang kedua memberikan 24 kesan transformasi imej. Untuk panggilan penapis dinamik, sebagai tambahan kepada jenis penapis, parameter, dsb. yang perlu ditakrifkan dalam penapis statik, bahasa skrip juga digunakan untuk mengawal statusnya.

Pertama sekali, sebelum memulakan kesan dinamik, anda perlu menggunakan (Guna) dan kemudian memainkan (Main) kesan dinamik Anda juga boleh mengganggu kesan dinamik (Berhenti) semasa kesan dinamik sedang dijalankan . Anda boleh menggunakan pelaksanaan Kaedah berikut:

Nama objek.penapis (nilai penapis).Gunakan()
Nama objek.penapis (nilai penapis).Play()
Nama objek.penapis ( nilai penapis) .Stop()

Status penapis boleh dinilai dengan "nama objek.penapis (nilai penapis).status". Apabila nilai ialah 0, ini bermakna penapis belum dilaksanakan . Apabila ia adalah 1, ia bermakna penapis belum dilaksanakan.

Apabila mentakrifkan penapis, seperti yang dinyatakan di atas, anda boleh mempunyai pengadun ("penapis:blendTrans(duration=nilai masa)", tempoh mewakili masa yang diperlukan untuk pelaksanaan penapis, dalam saat) dan paparan ( "penapis: revealTrans(tempoh=nilai masa, peralihan=jenis peralihan)", jenis peralihan ialah nilai dari 0 hingga 23).

Penapis belum lagi diiktiraf secara rasmi oleh W3C. Penapis hanyalah sebahagian daripada pelayar IE Microsoft dan tidak boleh digunakan dalam pelayar Netscape. Organisasi yang merumuskan piawaian yang berkaitan sedang membincangkan perkara ini, tetapi belum mencapai kesimpulan muktamad. Pada pendapat saya, penapis adalah bahagian yang sangat menyeronokkan dan penting untuk mencipta visual yang hebat. Penapis menjimatkan lebar jalur dan membolehkan anda menggunakan pemformatan teks apabila mencipta

reka bentuk visual yang hebat tanpa perlu mencipta peta bit teks yang besar terlebih dahulu untuk mencapai kesan yang sama.

Tetapi memandangkan ciri ini belum lagi menjadi bahagian rasmi HTML, tidak semua penyemak imbas boleh melihat ciri ini. Kadangkala, anda perlu mempertimbangkan untuk mencipta kesan yang sama dengan cara tradisional, dan sudah tentu, anda perlu terus memasukkan fail GIF yang besar ke dalam halaman web.
Senyap...Senyap...

3. Penjelasan terperinci tentang penapis CSS

Sintaks:

STYLE="filter:filtername(fparameter1, fparameter2...)"

(Nama penapis ialah nama penapis, fparameter1, fparameter2, dll. ialah parameter penapis)

Penerangan penapis:

alfa : tetapkan Tahap ketelusan
kabur: Cipta kesan pergerakan berkelajuan tinggi, iaitu, kesan kabur
kroma: Jadikan warna khas telus
DropShadow: Cipta bayang tetap objek
FlipH: Cipta imej cermin mendatar
FlipV: Cipta menegak Cerminkan imej
cahaya: tambah cahaya di luar tepi objek berdekatan
kelabu: tukar imej kepada skala kelabu
terbalikkan: terbalikkan warna
cahaya: cipta sumber cahaya pada objek
topeng: buat topeng lutsinar Membran pada objek
bayang-bayang: Cipta bayang tetap mengimbangi
gelombang: kesan riak
Xray: jadikan objek kelihatan seperti itu diterangi oleh sinar-x

1 Penapis: Alpha

Sintaks:

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=). finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY =finishY)"

Arahan:
Kelegapan: nilai permulaan, antara 0 hingga 100, 0 adalah lutsinar, 100 ialah imej asal.
FinishOpacity: nilai sasaran.
Gaya: 1 atau 2 atau 3
StartX: sebarang nilai
StartY: sebarang nilai

Contoh: penapis:Alpha(Opacity="0",FinishOpacity="75",Style= "2")

2. Penapis: kabur

Sintaks:

STYLE="filter:Blur(Tambah = tambah, Arah = arah, Kekuatan = kekuatan)"

Penjelasan:
Tambah: Umumnya 1, atau 0.
Arah: Sudut, 0~315 darjah, saiz langkah ialah 45 darjah.
Kekuatan: Nilai pertumbuhan kesan, secara amnya 5 sudah memadai.

Contoh: penapis:Kabur(Tambah="1",Arah="45",Strength="5")

3. Penapis: Chroma

Sintaks:

STYLE="filter:Chroma(Color = color)"

Penerangan: warna: #rrggbb format, sebarang.

Contoh: penapis:Chroma(Color="#FFFFFF")

4 Penapis: DropShadow

Sintaks:

STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

Penerangan:

Warna:#rrggbb format, sebarang.
Offx: Nilai sisihan paksi X.
Mati: Nilai offset paksi-Y.
Positif: 1 atau 0.

Contoh:

penapis:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5. Penapis: FlipH

Sintaks:

STYLE="filter:FlipH"

Contoh: penapis:FlipH

6. Penapis: FlipV

Sintaks: STYLE="filter:FlipV"

Contoh: penapis:FlipV

7. Penapis: bercahaya

Sintaks: STYLE="filter:Glow(Color=color, Strength=strength)"

Arahan:
Warna: Glow color .
Kekuatan: Kekuatan (0-100)

Contoh: penapis:Glow(Color="#6699CC",Strength="5")

8

Sintaks: STYLE="filter:Gray"

Contoh: penapis:Gray

9. Terbalikkan

Sintaks: STYLE="filter:Invert"

Contoh: penapis:Invert

10: topeng

Sintaks: STYLE=". penapis:Topeng(Warna=warna)"

Contoh: penapis:Topeng (Warna="#FFFFE0")

11. Penapis: bayang

Sintaks: penapis:Bayang(Warna=warna, Arah=arah)

Penerangan:
Warna: format #rrggbb.
Arah: sudut, 0-315 darjah, saiz langkah ialah 45 darjah.

Contoh: penapis:Bayang (Color="#6699CC", Direction="135")

12: gelombang

Sintaks : penapis: Gelombang(Tambah=tambah, Freq=freq, Kekuatan Cahaya=kekuatan, Fasa=fasa, Kekuatan=kekuatan)

Penerangan:
Tambah: Umumnya 1, atau 0.
Kekerapan: nilai ubah bentuk.
Kekuatan Cahaya: peratusan ubah bentuk.
Fasa: Peratusan ubah bentuk sudut.
Kekuatan: kekuatan ubah bentuk.

Contoh: penapis: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13. Penapis: Xray

Sintaks: STYLE="filter:Xray"

Contoh: penapis: >