Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

สร้าง Wave Effect คลื่นไซน์ด้วย CSS Filter


Wave effect ใช้ให้อ็อบเจกต์มีการบิดโค้งแบบ sine wave ทำให้ดูคลื่น

พารามิเตอร์ต่อไปนี้สามารถใช้ในฟิลเตอร์นี้ได้:

ลำดับพารามิเตอร์ & คำอธิบาย
1Add
ค่า 1 เพิ่มภาพต้นฉบับเข้ากับภาพคลื่น 0 ไม่เพิ่ม
2Freq
จำนวนคลื่น
3LightStrength
ความเข้มแสงบนคลื่น (0 ถึง 100)
4Phase
องศาที่ sine wave ควรเริ่มต้น (0 ถึง 100)
5Strength
ความเข้มของเอฟเฟกต์คลื่น

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อตั้งค่า wave effect:

<html>    <head>    </head>    <body>       <img src="/css/images/logo.png"alt="CSS Logo"style="FILTER: Chroma(Color = #000000)          Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">       <p>ตัวอย่างข้อความ:</p>       <div style="width: 357;          height: 50;          font-size: 30pt;          font-family: Arial Black;          color: red;          Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div>    </body> </html>