วิธีการรหัสเอฟเฟกต์ข้อความสมาร์ทด้วย CSS

Sep 14, 2025
วิธีการ
Image: Middle Child
[ภาพ: เด็กกลาง]

ลิงก์แบบโรลโอเวอร์เป็นวิธีที่ยอดเยี่ยมในการดึงดูดความสนใจของผู้ใช้โดยเฉพาะอย่างยิ่งหากพวกเขาทำสิ่งที่ผิดปกติหรือเป็นต้นฉบับ เด็กกลางมีผลที่ยอดเยี่ยมไม่ค่อยเห็นที่อื่นที่จับตัวอักษรแต่ละตัวและแยกพวกเขาออกจากกันด้วยภาพเคลื่อนไหวซึ่งเตะเมื่อผู้เข้าชมอยู่เหนือคำพูด แอนิเมชั่นช่วยสื่อถึงตัวละครที่ขี้เล่นของแบรนด์แซนวิช

ในบทความนี้เราจะแสดงวิธีการสร้างเอฟเฟกต์ในเว็บไซต์ของคุณ สำหรับแรงบันดาลใจมากขึ้นลองดูที่คำแนะนำของเรากับ ตัวอย่างแอนิเมชั่น CSS ที่ดีที่สุด (พร้อมคำแนะนำเกี่ยวกับวิธีการโค้ดพวกเขา) สำหรับสิ่งที่แตกต่างกันเล็กน้อยลองไปด้านบน สร้างเว็บไซต์ หรือการเลือกที่ดีที่สุดของเรา การจัดเก็บเมฆ . และถ้าคุณทำให้เว็บไซต์ของคุณซับซ้อนขึ้นตรวจสอบให้แน่ใจ เว็บโฮสติ้ง อยู่ในจุด

01. ผลข้อความโรลโอเวอร์

หนึ่งในเอฟเฟกต์ข้อความที่ยอดเยี่ยมในเว็บไซต์เด็กกลางนั้นใช้สำหรับเอฟเฟกต์แบบโรลโอเวอร์ในเมนูที่ตัวอักษรแยกออกจากข้อความและหมุนเล็กน้อย เริ่มต้นด้วยแท็ก HTML ง่ายๆ 

 & lt; div class = "wrapper" & gt;
& lt; div class = "word" & gt; อาหารเช้า & lt; / div & gt;
& lt; / div & gt;

02. สร้าง CSS

ใช้ไฟล์ CSS หรือแท็กสไตล์แยกต่างหากเพื่อเพิ่มกฎ CSS ต่อไปนี้และทำให้หน้ากรอกขนาดเต็มของเบราว์เซอร์โดยให้แน่ใจว่าร่างกายและผ้าห่อหุ้มใช้ความสูงเต็มรูปแบบ 

 ร่างกาย {
ความกว้าง: 100%;
ความสูง: 100%;
มาร์จิ้น: 0;
padding: 0;
}
.wrapper {
จอแสดงผล: กริด;
ความสูง: 100%;
}

03. ตำแหน่งคำ

ที่ คำ Class Center Word ในตาราง ข้อความใด ๆ ที่ได้รับ คำ ชั้นเรียนสามารถใช้สิ่งนี้ได้ ที่ ขึ้น ชั้นเรียนจะถูกนำไปใช้กับจดหมายอื่น ๆ และสิ่งเหล่านี้จะเลื่อนขึ้นไป 

 คำ {
ขนาดตัวอักษร: 3em;
มาร์จิ้น: อัตโนมัติอัตโนมัติ;
}

. คำ .up
{
จอแสดงผล: บล็อกแบบอินไลน์;
แปลง: Translate3d (0px, 0px, 0px)
หมุน (0deg);
การเปลี่ยนแปลง: ทั้งหมด 0.5s ease-out;
}

04. ขึ้นและมากกว่า

ตอนนี้ ลง แบ่งปันการตั้งค่าที่คล้ายกันมากกับ ขึ้น แต่โฮเวอร์แสดงการเคลื่อนไหวขึ้นไปสำหรับ ขึ้น กลิ้งไป. ขึ้นไปข้างบนก็หมุนเล็กน้อยเพื่อเพิ่มลุค 

 คำ. ลง
{
จอแสดงผล: บล็อกแบบอินไลน์;
แปลง: Translate3d (0px, 0px, 0px)
หมุน (0deg);
การเปลี่ยนแปลง: ทั้งหมด 0.5s ease-out;
}

.Word: Hover .UP
{
แปลง: translate3d (0px, -8px, 0px)
หมุน (12deg);
สี: # 058B05
}

05. โฉบลง

เมื่อผู้ใช้วนเวียนอยู่เหนือข้อความคลาสลงเลื่อนข้อความลง ในภายหลังใน JavaScript ข้อความจะถูกแบ่งออกเป็นช่วงแยกต่างหากด้วยชั้นเรียนที่เพิ่มโดยอัตโนมัติเพื่อเปลี่ยน Spans 

 .word: โฉบ. ลง {
แปลง: translate3d (0px, 8px, 0px)
หมุน (-12deg);
สี: # 058B05;
}

06. อัตโนมัติสำหรับผู้คน

มันเป็นเรื่องยุ่งยากที่จะต้องใส่จดหมายทุกฉบับในช่วงสลับกับชั้นเรียนที่แตกต่างกันดังนั้นเราจะทำให้กระบวนการโดยทำให้ JavaScript เป็นอัตโนมัติเพื่อสืบค้นตัวเลือกและใช้ตัวอักษรแต่ละตัว ที่นี่ STR ตัวแปรคว้าตัวอักษรปัจจุบันเมื่อมันลูปผ่านข้อความ 

 & lt; สคริปต์ & gt;
var elements = document.queryselectorall
('.คำ');
สำหรับ (var i = 0, l = elements.length; i
& lt; l; I ++) {
var str = elements [i]. textcontent;
องค์ประกอบ [i] .innerhtml = '';

07. เพิ่มคลาสสลับกัน

ตอนนี้การวนซ้ำอีกหนึ่งตัวอักษรในองค์ประกอบช่วงของตัวเองและเพิ่มทั้ง ขึ้น หรือ ลง ชั้นเรียนถึงช่วง หากคุณดูที่นี่ในเบราว์เซอร์คุณจะเห็นข้อความแยกตามตัวอักษรแต่ละตัวขึ้นและลงในขณะที่หมุนเล็กน้อย

คุณสามารถเห็นเอฟเฟกต์ในการดำเนินการใน เว็บไซต์เด็กกลาง . 

 สำหรับ (var j = 0, ll = str.length; j
& lt; ll; J ++) {
var spn = document.createelement ('span');
องค์ประกอบ [i]. Appendchild (SPN);
spn.textcontent = str [j];
ให้ pos = (j% 2)? 'ขึ้นลง';
spn.classlist.add (pos);
}
 }
& lt; / script & gt;

บทความนี้ได้รับการตีพิมพ์ในนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 286 หรือ ติดตาม .

อ่านเพิ่มเติม:

  • เพิ่มตัวกรอง SVG ด้วย CSS
  • วิธีการออกแบบด้วยรูปร่าง CSS: บทนำ
  • 5 เครื่องกำเนิดไฟฟ้า CSS CSS เย็น

วิธีการ - บทความยอดนิยม

Google Slide: วิธีการออกแบบเอกสาร

วิธีการ Sep 14, 2025

(เครดิตรูปภาพ: Google) Google Slide กำลังเป็นที่นิยมมาก..

จัดการสถานะแบบฟอร์มตอบสนองด้วย Formik

วิธีการ Sep 14, 2025

(เครดิตรูปภาพ: Matt Crouch) ยินดีต้อนรับสู่คำแนะน�..

สร้างส่วนประกอบหัวที่เป็นมิตรกับ SEO สำหรับ NEXTJS / REACT

วิธีการ Sep 14, 2025

(เครดิตภาพ: พื้นที่เชิงลบใน PEXELS) ในขณะที่ React �..

Chiaroscuro Art: คู่มือทีละขั้นตอน

วิธีการ Sep 14, 2025

การทำ Chiaroscuro Art เป็นเรื่องเกี่ยวกับการใช้องค์ประกอบของแสงและเงาในการส..

วิธีสร้างการจำลองด้วยน้ำ

วิธีการ Sep 14, 2025

บทช่วยสอนนี้จะสอนให้คุณสร้างภาพวาดชายหาดแบบ..

วิธีการเปลี่ยนแบบอักษรใน Bio Twitter ของคุณ

วิธีการ Sep 14, 2025

มีผู้คนจำนวนมากบน Twitter - 261 ล้านบัญชี Twitter ครั้งสุดท..

สไตล์ไซต์โดยใช้ Sass

วิธีการ Sep 14, 2025

คุณสามารถทำอะไรได้มากกับ CSS - บางทีมากกว่าที่ค�..

วิธีการฝึกซ้อมผิวหนังในแบบ 3 มิติ

วิธีการ Sep 14, 2025

เป็นเวลานานแล้วตอนนี้ฉันติดอยู่ในร่องด้วยขอ..

หมวดหมู่