Rumah  >  Artikel  >  hujung hadapan web  >  kesan penapis css (2)_Tutorial asas

kesan penapis css (2)_Tutorial asas

WBOY
WBOYasal
2016-05-16 12:08:121288semak imbas

7、Gray ,Invert,Xray 滤镜

语法:{filter:gray} ,{filter:invert},{filter:xray}

Gray滤镜是把一张图片变成灰度图;Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值;Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片。

效果如下:

正常图片 filter:gray; 灰度图  是不是很 Cool 呢!
filter:invert 底片效果 filter:xray  X光效果

8. Penapis cahaya

Sintaks: Penapis{light}

Atribut ini menyerupai kesan unjuran sumber cahaya. Setelah sifat penapis "LIGHT" ditakrifkan untuk objek, "Kaedah"nya boleh dipanggil untuk menetapkan atau menukar sifat tersebut. Kaedah yang tersedia untuk "CAHAYA" ialah:

  • AddAmbient Tambah sumber cahaya sekeliling
  • AddCone Tambah sumber cahaya kon
  • AddPoint Tambah sumber cahaya titik
  • Changcolor Tukar warna cahaya
  • Changstrength Tukar keamatan sumber cahaya
  • Kosongkan Kosongkan semua sumber cahaya
  • MoveLight Move sumber cahaya

Anda boleh menentukan kedudukan maya sumber cahaya, dan mengawal kedudukan fokus sumber cahaya dengan melaraskan nilai paksi-X dan paksi-Y Anda juga boleh melaraskan bentuk daripada sumber cahaya (titik sumber cahaya atau sumber cahaya kon) untuk menentukan sama ada sumber cahaya mengaburkan sempadan, Warna, kecerahan dan sifat lain sumber cahaya. Jika anda menetapkan sumber cahaya secara dinamik, beberapa kesan yang tidak dijangka mungkin berlaku. Akan ada contoh khusus pada halaman berikut.

9. Penapis topeng

Sintaks: {filter:mask(color=color)}

Gunakan atribut "MASK" untuk mencipta filem yang menutupi permukaan objek Kesannya sama seperti memakai cermin mata berwarna untuk melihat objek.

10. Penapis bayang

Sintaks: {filter:shadow(color=color,direction=direction)}

Gunakan atribut "Shadow" untuk mencipta unjuran objek dalam arah yang ditentukan COLOR ialah warna unjuran dan ARAH ialah arah unjuran. Di mana 0 darjah mewakili menegak ke atas, dan kemudian setiap 45 darjah ialah satu unit. Nilai lalainya ialah 270 darjah ke kiri.

penapis:bayang(warna=merah,arah=225)
penapis:bayang(warna=biru,arah=225)
penapis:bayang(warna=kelabu,arah=225 )
Kesannya adalah seperti berikut:

Penapis bayang-bayang Air Titisan Mencuci Atap Pengeluaran Rumah Teh
Penapis bayang-bayang Air Titisan Mencuci Atap Pengeluaran Rumah Teh
Penapis bayangPengeluaran Air Teaves Tea House
11 Penapis gelombang Sintaks: {filter:wave(add=add , freq=freq,lightstrength=strength,phase=phase,strength=strength)}
Atribut "gelombang" mengganggu objek dalam gaya bentuk gelombang menegak. Lalai ialah "TRUE (bukan-0)",

"TAMBAH" menunjukkan sama ada untuk mengganggu objek dalam gaya bentuk gelombang,

"FREQ" ialah kekerapan riak, yang menentukan bilangan riak lengkap yang perlu dijana pada objek,

Parameter "LIGHTSTRENGTH" boleh meningkatkan kesan cahaya dan bayang pada riak, antara 0 hingga 100,

Parameter "FASA" digunakan untuk menetapkan offset gelombang sinus.

"KEKUATAN" mewakili amplitud.

正常图片 filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)
style="filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5) filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)
Kenyataan:
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