วิธีสร้างข้อความกะพริบ/กะพริบด้วย CSS

” องค์ประกอบเพื่อระบุส่วนหัวระหว่างองค์ประกอบ div:

---

---

< แผนก ระดับ = 'แบบกระพริบตา' >
< h3 > ลีนุกซ์ h3 >
แผนก >

ไปข้างหน้าเพื่อจัดรูปแบบองค์ประกอบ HTML

สไตล์ div แบบ 'กะพริบตา'

.blink สไตล์ {
พื้นหลัง: RGB ( 0 , 0 , 0 ) ;
}

ซีเอสเอส “ พื้นหลัง ” คุณสมบัติถูกนำไปใช้กับองค์ประกอบ div กับคลาส “ กระพริบตา '.

สไตล์องค์ประกอบ 'h3'

h3 {
จัดข้อความ: กึ่งกลาง;
ครอบครัวแบบอักษร: Verdana;
สี: #ffc310;
ภาพเคลื่อนไหว: ข้อความกะพริบ 1.9s เชิงเส้นไม่สิ้นสุด;
ขนาดตัวอักษร: 6em;
}

HTML “

” องค์ประกอบตกแต่งด้วยคุณสมบัติ CSS ต่อไปนี้:

• “ จัดข้อความ คุณสมบัติ ” กำหนดการจัดตำแหน่งของข้อความขององค์ประกอบ
• “ ครอบครัวแบบอักษร ” กำหนดรูปแบบตัวอักษรสำหรับข้อความ
• “ สี ” ใช้เพื่อระบายสีข้อความขององค์ประกอบ
• “ ภาพเคลื่อนไหว ” คือคุณสมบัติชวเลขที่ระบุชื่อแอนิเมชัน ระยะเวลาแอนิเมชัน ฟังก์ชันแอนิเมชัน-ไทม์มิ่ง และค่าคุณสมบัติแอนิเมชัน-การวนซ้ำ-นับ
• “ ขนาดตัวอักษร คุณสมบัติ ” ปรับขนาดตัวอักษรส่วนใหญ่ในหน่วย “px” และ “em”

ใช้ “กฎ @keyframe” กับภาพเคลื่อนไหว “ข้อความกะพริบ”

@ คีย์เฟรมกะพริบข้อความ {
0 % {
ความทึบ: 0 ;
}
ห้าสิบ % {
ความทึบ: หนึ่ง ;
}
100 % {
ความทึบ: 0 ;
}

ชื่ออนิเมชั่น “ ข้อความกะพริบ ” ถูกระบุในคุณสมบัติแอนิเมชั่น “ @คีย์เฟรม กฎ ” ถูกเพิ่มไว้หน้าชื่อแอนิเมชันซึ่งบ่งบอกถึงลักษณะการทำงานของแอนิเมชันในช่วงเวลาต่างๆ ดังที่กล่าวไว้ด้านล่าง:

• ที่ ' 0% ” ภาพเคลื่อนไหว ความทึบของข้อความถูกกำหนดเป็น 0
• ที่ ' ห้าสิบ% ” ภาพเคลื่อนไหว ความทึบของข้อความถูกตั้งค่าเป็น 1
• ที่ ' 100% ” ภาพเคลื่อนไหว ความทึบของข้อความถูกตั้งค่าเป็น 0

เอาต์พุต

ตัวอย่างที่ 2: การสร้างข้อความกะพริบหลายข้อความ

หากต้องการสร้างข้อความกะพริบหลายข้อความใน HTML ให้ทำตามขั้นตอนด้านล่าง:

• ขั้นแรก ให้วาง “
  ” องค์ประกอบและกำหนดเป็นคลาส “ ข้อความ div '.
• จากนั้นเพิ่มสอง “

  ” องค์ประกอบเพื่อรวมข้อความบางส่วน

• อิลิเมนต์ “

  ” ตัวแรกถูกกำหนดให้เป็นคลาส “ กระพริบ '.

• อันที่สองกำหนดสองคลาส “ กระพริบ ' และ ' หนึ่ง '. ทั้งสองคลาสสามารถเข้าถึงได้ใน CSS เพื่อประกาศคุณสมบัติสไตล์:

< แผนก ระดับ = 'ข้อความ-div' >
< หน้า ระดับ = 'กระพริบ' > กระพริบตา กระพริบตา หน้า >
< หน้า ระดับ = 'กระพริบหนึ่ง' > ดาวดวงน้อย * หน้า >
แผนก >

ตอนนี้ ตรวจสอบส่วน CSS เพื่อจัดรูปแบบ HTML “

” องค์ประกอบ

สไตล์ 'text-div' div

.text-div {
ความกว้าง: 400px;
ขอบ: รถยนต์;
สีพื้นหลัง: rgb ( 42 , 49 , 49 ) ;
ช่องว่างภายใน: 8px;
}

“ .text-div ” ใช้เพื่อเข้าถึงองค์ประกอบ

ภายในวงเล็บปีกกา คุณสมบัติ CSS ต่อไปนี้ใช้กับ “.text-div”:

• “ ความกว้าง ” คุณสมบัติปรับความกว้างขององค์ประกอบ
• “ ขอบ ” เพิ่มพื้นที่รอบๆ องค์ประกอบ
• “ สีพื้นหลัง ” กำหนดสีพื้นหลัง
• “ การขยายความ ” สร้างพื้นที่ภายในขอบเขตขององค์ประกอบ

สไตล์คลาส 'แวบวับ'

.กระพริบ {
สี: สีเหลือง;
ขนาดตัวอักษร: 40px;
ครอบครัวแบบอักษร: เล่นหาง;
น้ำหนักตัวอักษร: ตัวหนา;
แอนิเมชั่น: 0.6s เชิงเส้นแบบกระพริบแบบไม่สิ้นสุด;
}

“ .กระพริบ ” ใช้เพื่อเข้าถึงแท็ก HTML

คุณสมบัติต่อไปนี้ถูกนำมาใช้ในคลาสนี้:

• “ ตัวอักษรน้ำหนัก ” หมายถึงความหนาของแบบอักษร
• คุณสมบัติอื่น ๆ อธิบายไว้ในส่วนด้านบน

ใช้ “@keyframe rule” กับแอนิเมชั่น “รูปแบบกระพริบ”

@ คีย์เฟรมแบบกระพริบ {
0 % {
ความทึบ: 0 ;
}
}

ปรับพฤติกรรมของ “ แบบกระพริบ ” ภาพเคลื่อนไหวโดยใช้ “ @คีย์เฟรม ' กฎ. ในช่วงเริ่มต้นของภาพเคลื่อนไหว ความทึบของข้อความจะเป็น 0 ซึ่งแสดงถึงระดับความโปร่งใสที่สมบูรณ์ขององค์ประกอบ

เพื่อทำแอนิเมชั่นเรื่องที่สอง “

” องค์ประกอบที่แตกต่างกันเล็กน้อย คลาส “ หนึ่ง ” ถูกประกาศด้วยสไตล์แอนิเมชั่นต่อไปนี้:

สไตล์ 'หนึ่ง' คลาส

.หนึ่ง {
ภาพเคลื่อนไหว: หนึ่ง 1s เชิงเส้นอนันต์;
}
@ คีย์เฟรมหนึ่ง {
ห้าสิบ % {
ความทึบ: 0 ;
}
}

เอาต์พุต

เราได้เรียนรู้วิธีสร้างข้อความกะพริบอย่างมีประสิทธิภาพโดยใช้คุณสมบัติสไตล์ CSS ที่แตกต่างกัน

บทสรุป

ใน HTML มีการใช้คุณสมบัติ CSS หลายอย่างเพื่อทำให้รูปแบบข้อความกะพริบ “ ภาพเคลื่อนไหว ' และ ' ความทึบ ” คุณสมบัติถูกกำหนดโดยทั่วไปในบริบทนี้ หากต้องการปรับพฤติกรรมการกะพริบ ปุ่ม “ @คีย์เฟรม ” มีการประกาศกฎสำหรับคุณสมบัติแอนิเมชั่น บทความนี้ได้อธิบายวิธีทำให้ข้อความกะพริบหรือกะพริบใน HTML โดยใช้ CSS