10 ตัวอย่าง CSS สำหรับการสร้างเอฟเฟกต์ข้อความขีดเส้นใต้ภาพเคลื่อนไหวที่น่าทึ่ง

การขีดเส้นใต้ CSS เริ่มต้นใช้งานได้ดี ใครจะเกลียดมัน?

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

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

1. ขีดเส้นใต้สลับกัน

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

ไม่เพียงแค่นั้น แต่ยังเคลื่อนผ่านการนำทางแบบไดนามิกเพื่อสร้างภาพลวงตาว่าเป็นบล็อกเดียว สวยเย็นใช่มั้ย?

คุณสามารถทำสิ่งนี้ได้ด้วยตัวเองด้วย CSS เล็กน้อยโดยเพิ่มบล็อกที่ขีดเส้นใต้ลงในองค์ประกอบ HTML ง่ายอย่างน่าประหลาดใจเมื่อพิจารณาว่าคุณต้องการโค้ดเพียงเล็กน้อย ( CSS ประมาณ 60 บรรทัด)

2. ขยายหลายบรรทัด

สไตล์ตัวแบ่งบรรทัด CSS นั้นยุ่งยากและไม่ใช่เรื่องง่ายที่จะแก้ไข แต่ด้วยนักพัฒนาที่เฉลียวฉลาด Will King ได้สร้างปากกานี้ขึ้นมาโดยสร้างเอฟเฟกต์การขีดเส้นใต้แบบไดนามิกที่สามารถขยายได้หลายบรรทัดโดยไม่มีข้อบกพร่อง

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

นอกจากนี้สิ่งทั้งหมดนี้ใช้การไล่ระดับสี CSS3 แบบกำหนดเองสำหรับพื้นหลังซึ่งค่อนข้างเจ๋ง

3. เลื่อนขีดเส้นใต้

นักพัฒนา Ryan Morse ได้สร้างเอฟเฟกต์การขีดเส้นใต้แบบเลื่อนง่ายๆ โดยอาศัย CSS เพียงอย่างเดียว เป็นโซลูชันที่ค่อนข้างหรูหราเมื่อพิจารณาว่าไม่ต้องใช้รายการ HTML เพิ่มเติมด้วยซ้ำ

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

4. ขีดเส้นใต้ข้อความที่ดีขึ้น

เมื่อมองแวบแรก คุณอาจไม่สังเกตเห็นอะไรที่แตกต่างกับการขีดเส้นใต้นี้ แต่ถ้าคุณเปรียบเทียบกับการสาธิต "เริ่มต้น" ที่ต่ำกว่าในหน้า คุณจะเห็นว่าสิ่งนี้ดูดีขึ้นมากจริงๆ

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

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

5. สไตล์แอนิเมชั่น

ปากกาพิเศษนี้มีเอฟเฟกต์การขีดเส้นใต้แบบกำหนดเองที่สร้างขึ้นด้วย CSS บริสุทธิ์โดยผู้พัฒนา Matthew Scott

มีรูปแบบการขีดเส้นใต้เฉพาะสี่รูปแบบตามการเปลี่ยน CSS ทั่วไป:

• จากขวาไปซ้าย
• ซ้ายไปขวา
• แอนิเมชั่นภายนอก
• เคลื่อนไหวเข้าด้านใน

คุณจะสังเกตเห็นการทำงานนี้กับการเปลี่ยน CSS3 ทั่วไปซึ่งทำงานทั้งขณะวางเมาส์ที่ลิงก์ & ขณะย้ายเคอร์เซอร์ออกจากลิงก์

เอฟเฟกต์เจ๋ง ๆ บางอย่างและมันค่อนข้างง่ายที่จะนำไปใช้กับโปรเจ็กต์ของคุณเอง

6. รูปแบบแอนิเมชั่นเพิ่มเติม

นี่เป็นแอนิเมชั่นการขีดเส้นใต้แบบกำหนดเองอีกชุดหนึ่ง ซึ่งสร้างโดย dev Kseso

สิ่งเหล่านี้จะรุนแรงขึ้นอีกเล็กน้อยด้วยรูปแบบการขีดเส้นใต้ที่ผลักเงา CSS3 เพื่อให้ได้เอฟเฟกต์ที่เร่าร้อน คุณอาจใช้เทมเพลตนี้เป็นเทมเพลตเพื่อสร้างดีไซน์ไลท์เซเบอร์ของ Star Wars หากคุณมีเวลา (หรือแค่ชอบ Star Wars)

7. แค่หล่นลงมา

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

ด้วยแอนิเมชั่นนี้ คุณจะยังคงรู้สึกว่าแต่ละเส้นที่ขีดเส้นใต้ “เส้นขอบ” เชื่อมต่อกับแต่ละลิงก์ ฉันชอบมันมากกว่าเส้นที่เลื่อนไปมาระหว่างลิงก์เพราะเอฟเฟกต์นี้ให้ความรู้สึกที่ฉับไวและตรงไปตรงมามากกว่า

หากคุณต้องการแนวทางมินิมัลลิสต์อย่างแท้จริงในการขีดเส้นใต้เอฟเฟกต์ คุณควรลองใช้โค้ดนี้อย่างแน่นอน

8. การขยายแอนิเมชั่น

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

สังเกตว่ามันใช้ฟังก์ชัน cubic-bezier() เพื่อสร้างแอนิเมชั่นเฉพาะเมื่อวางเมาส์เหนือ

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

9. ขีดเส้นใต้ CSS ที่กำหนดเอง

นี่เป็นอีกรูปแบบหนึ่งที่สามารถใช้ได้กับทุกเว็บไซต์จริงๆ นักพัฒนา Tristan Wilson ได้สร้างการขีดเส้นใต้แบบง่ายๆ เหล่านี้ขึ้นโดยให้ขอบบรรทัดอยู่ต่ำกว่าข้อความไม่กี่พิกเซล

มันละเอียดอ่อนพอที่จะสังเกตได้ แต่จะไม่สร้างความแตกต่างอย่างมากในการใช้งาน เอฟเฟกต์นี้เกี่ยวกับ สุนทรียศาสตร์ มากกว่าการใช้งานพิเศษจริงๆ

หากคุณต้องการให้ขีดเส้นใต้ของคุณโดดเด่นกว่ากลุ่มทั้งหมด เซ็ตนี้เป็นจุดเริ่มต้นที่ดี

10. การติดตั้งระหว่าง Descenders

ก่อนหน้านี้ฉันพูดถึงการปรับแต่งสไตล์การขีดเส้นใต้ให้เหมาะสมกับประเภทที่ลดต่ำลง ปากกานี้โดย Jonathan Neal ทำอย่างนั้นและใช้อะไรมากไปกว่า HTML5 และ CSS3

เอฟเฟกต์ทั้งหมดขึ้นอยู่กับคุณสมบัติ CSS3 สองสามอย่าง: box-shadow และ text-shadow เพื่อให้แม่นยำ

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

เป็นทางเลือกที่สะอาดตาสำหรับเว็บไซต์ใดๆ และเป็นวิธีที่ดีในการสลับสีที่ขีดเส้นใต้ของคุณด้วย

11. การไล่ระดับสีแบบกำหนดเอง

หากคุณกำลังพยายามที่จะก้าวข้ามขีดจำกัด ให้ลองใช้ปากกานี้ใหม่ด้วยรูปแบบการไล่ระดับสีที่ขีดเส้นใต้แบบกำหนดเอง

การไล่ระดับสีทำงานผ่าน CSS3 เพื่อให้คุณสามารถเปลี่ยนสีเป็นอะไรก็ได้ที่คุณต้องการ และถ้าคุณเชื่อได้ว่าสิ่งนี้ ไม่ต้องการ HTML พิเศษ ในการทำงาน เพียงกำหนดเป้าหมายลิงก์สมอที่คุณต้องการและคัดลอก/วางโค้ด CSS เพื่อรับการขีดเส้นใต้การไล่ระดับสีของคุณเอง

จากการออกแบบทั้งหมดเหล่านี้ ฉันหวังว่าจะมีเอฟเฟกต์ดีๆ ที่คุณสามารถนำออกจากคอลเลกชั่นนี้ได้

นักออกแบบไม่ได้คิดถึงเอฟเฟกต์การขีดเส้นใต้เสมอไป แต่คุณสามารถทำอะไรได้มากมายกับการออกแบบตัวอักษร และถ้าคุณรู้วิธีใน CSS ของคุณ จริงๆ แล้ว ท้องฟ้าก็มีขีดจำกัด