บทความนี้จะให้:
- วิธีที่ 1: เอฟเฟ็กต์เฟดอินโดยใช้คุณสมบัติภาพเคลื่อนไหว CSS
- วิธีที่ 2: เอฟเฟ็กต์เฟดอินโดยใช้คุณสมบัติการเปลี่ยนผ่าน CSS
วิธีที่ 1: Fade-in Effect โดยใช้ CSS “animation” Property
ในการออกแบบหน้า HTML อย่างง่าย ให้เพิ่มองค์ประกอบต่อไปนี้:
- เพิ่ม ' ” องค์ประกอบพร้อมกับ “ สไตล์ ' คุณลักษณะ. แอตทริบิวต์ 'style' มีคุณสมบัติการจัดรูปแบบองค์ประกอบ
- ใช้ “ สี คุณสมบัติ ” ในแอตทริบิวต์สไตล์เพื่อกำหนดสีข้อความขององค์ประกอบ
- หลังจากนั้นให้ใช้ปุ่ม “ ” องค์ประกอบเพื่อเพิ่มข้อความหรือย่อหน้าง่ายๆ
ด้านล่างนี้คือรหัส HTML:
< ชั่วโมง2 สไตล์ = 'สี: rgb(84, 8, 191)' >
เว็บไซต์สอนลินุกซ์
< / ชั่วโมง2 >
< หน้า > เอฟเฟ็กต์เฟดอินในการโหลดหน้าเว็บ < / หน้า >
สร้างหน้า HTML สำเร็จแล้ว:
ในส่วน CSS หากต้องการใช้เอฟเฟ็กต์เฟดอินบนหน้า ให้คลิก “ ภาพเคลื่อนไหว ” คุณสมบัติ CSS จะถูกใช้ใน “ <เนื้อหา> ” องค์ประกอบของหน้า HTML
สไตล์องค์ประกอบ 'ร่างกาย'
ร่างกาย {ภาพเคลื่อนไหว: fadeInPage ง่าย 3 วินาที;
ภาพเคลื่อนไหวจำนวนการวนซ้ำ: หนึ่ง ;
}
“
” ใช้กับคุณสมบัติ CSS ต่อไปนี้:- “ ภาพเคลื่อนไหว ” เป็นคุณสมบัติชวเลขที่กำหนดภาพเคลื่อนไหวโดยระบุค่าหลายค่า ที่นี่ ชื่อแอนิเมชัน ฟังก์ชันการกำหนดเวลาของแอนิเมชัน และระยะเวลาของแอนิเมชันถูกกำหนดไว้แล้ว
- “ ภาพเคลื่อนไหวนับซ้ำ ” กำหนดจำนวนครั้งที่ภาพเคลื่อนไหวควรวนซ้ำ
ใช้กฎ “@keyframes” กับ “ภาพเคลื่อนไหว”
@คีย์เฟรม fadeInPage {0 % {
ความทึบ: 0 ;
}
100 % {
ความทึบ: หนึ่ง ;
}
}
เพื่อกำหนด “ @คีย์เฟรม ” กฎสำหรับแอนิเมชัน ให้ระบุชื่อแอนิเมชันหลังคีย์เวิร์ด @keyframes แก้ไขลักษณะการทำงานของแอนิเมชั่นดังนี้:
- ที่ ' 0% ” แอนิเมชั่น, “ ความทึบ คุณสมบัติ ” ถูกกำหนดเป็นค่า 0 หมายความว่าเมื่อภาพเคลื่อนไหวเริ่มทำงาน รูปภาพจะโปร่งใส
- ที่ ' 100% ” ภาพเคลื่อนไหว ความทึบถูกตั้งค่าเป็น “ หนึ่ง ” ซึ่งหมายถึงสีทึบ
เอาต์พุต
มาดูวิธีที่สองในการใช้เอฟเฟ็กต์ Fade-in ในการโหลดหน้าเว็บ
วิธีที่ 2: Fade-in Effect โดยใช้ CSS “transition” Property
เพิ่ม ' กำลังโหลด ” แอตทริบิวต์ภายใน “ <เนื้อหา> ' องค์ประกอบ. เหตุการณ์นี้เกิดขึ้นเมื่อโหลดหน้าเว็บ เมื่อโหลด ความทึบขององค์ประกอบร่างกายจะถูกตั้งค่าเป็น “ หนึ่ง ” ซึ่งเกี่ยวข้องกับสีทึบ:
< ร่างกาย กำลังโหลด = 'document.body.style.opacity='1'' >ในตัวอย่างนี้ CSS “ การเปลี่ยนแปลง คุณสมบัติ ” ใช้เพื่อเพิ่มเอฟเฟ็กต์เฟดอิน:
ร่างกาย {ความทึบ: 0 ;
การเปลี่ยนแปลง: ความทึบ 6s;
}
ต่อไปนี้เป็นคำอธิบายของคุณสมบัติที่ระบุไว้ข้างต้น:
- “ ความทึบ ” คุณสมบัติกำหนดความโปร่งใสขององค์ประกอบ
- การใช้ CSS “ การเปลี่ยนแปลง ” ค่อยๆ เปลี่ยนค่าของคุณสมบัติในช่วงเวลาที่กำหนด
เอาต์พุต
เราได้สอนวิธีการใช้ CSS เพื่อให้เอฟเฟกต์จางลงในการโหลดหน้าเว็บ
บทสรุป
สามารถใช้คุณสมบัติ CSS หลายอย่างเพื่อใช้เอฟเฟ็กต์เฟดอินกับองค์ประกอบ HTML โดยเฉพาะอย่างยิ่ง ' ภาพเคลื่อนไหว ”, “ ความทึบ ', และ ' การเปลี่ยนแปลง คุณสมบัติ ” สามารถใช้เพื่อระบุเอฟเฟ็กต์ภาพเคลื่อนไหวบนหน้าหรือองค์ประกอบต่างๆ ภาพเคลื่อนไหวได้รับการปรับแต่งโดยใช้ปุ่ม “ @คีย์เฟรม ' กฎ. บทความนี้ได้อธิบายวิธีการเพิ่มเอฟเฟ็กต์เฟดอินในการโหลดหน้าเว็บโดยใช้ CSS