เว็บไซต์สมัยใหม่ส่วนใหญ่ใช้ Cascading Style Sheets (CSS) บางไซต์ใช้คุณสมบัติ CSS พื้นฐาน ในขณะที่บางไซต์ใช้คุณสมบัติขั้นสูงเพื่อทำให้เว็บแอปพลิเคชันน่าดึงดูดยิ่งขึ้น
การเพิ่มเอฟเฟกต์ที่สะดุดตาสามารถเพิ่มอัตราการคลิกบนเว็บไซต์ของคุณ กระตุ้นให้ผู้ใช้ดำเนินการ หรือแม้แต่เพิ่มระยะเวลาที่ผู้ใช้ใช้ในเว็บไซต์ของคุณ
ในบทความนี้ เราจะพูดถึงว่าเอฟเฟ็กต์โฮเวอร์ของ CSS คืออะไร ทำให้เว็บไซต์ของคุณสะดุดตาได้อย่างไร คุณจะใช้เอฟเฟ็กต์เหล่านี้ได้อย่างไร และยกตัวอย่างเว็บไซต์ที่ใช้เอฟเฟ็กต์โฮเวอร์ CSS ที่มีระดับ
เอฟเฟ็กต์โฮเวอร์ CSS คืออะไร
เอฟเฟ็กต์โฮเวอร์ CSS เกิดขึ้นเมื่อผู้ใช้เว็บไซต์วางเมาส์เหนือองค์ประกอบโดยใช้เคอร์เซอร์ (ตัวชี้เมาส์) ผลลัพธ์อาจเป็นการเปลี่ยนสี ข้อความ หรือเอฟเฟ็กต์ภาพเคลื่อนไหวอื่นๆ เอฟเฟ็กต์ดังกล่าวถูกเพิ่มลงในเว็บไซต์เพื่อปรับปรุงการโต้ตอบและทำให้นำทางได้มากขึ้น
เอฟเฟ็กต์โฮเวอร์ CSS สามารถปรากฏเป็นการเปลี่ยนหรือภาพเคลื่อนไหว
การเปลี่ยน
เอฟเฟ็กต์ดังกล่าวช่วยให้คุณเปลี่ยนรูปลักษณ์หรือพฤติกรรมขององค์ประกอบบนหน้าเว็บได้ อย่างไรก็ตาม จะต้องมีทริกเกอร์ เช่น ผู้ใช้วางเมาส์เหนือองค์ประกอบเฉพาะ การเปลี่ยนย้ายจากสถานะเริ่มต้นไปยังสถานะสุดท้ายหลังจากทริกเกอร์ การเปลี่ยนทำงานเพียงครั้งเดียวและไม่อนุญาตให้คุณระบุจุดกึ่งกลาง
ภาพเคลื่อนไหว
เอฟเฟ็กต์เหล่านี้มีคีย์เฟรมซึ่งทำให้สามารถย้อนกลับ วนซ้ำ และย้ายจากสถานะเริ่มต้นไปยังสถานะสุดท้ายซ้ำได้ ผลกระทบเหล่านี้ยังมีสถานะระดับกลาง คีย์เฟรมบ่งชี้ว่าองค์ประกอบที่เคลื่อนไหวแสดงผลตามเวลาที่กำหนดในลำดับภาพเคลื่อนไหวอย่างไร
ประเภทของเอฟเฟกต์ CSS Hover
สามารถใช้เอฟเฟ็กต์โฮเวอร์ CSS กับข้อความ รูปภาพ วิดีโอ ลิงก์ หรือปุ่มต่างๆ ได้ ต่อไปนี้เป็นแอปพลิเคชันหลักบางส่วน:
#1. เอฟเฟ็กต์โฮเวอร์ข้อความ
เอฟเฟ็กต์ดังกล่าวเหมาะสมเมื่อคุณต้องการสร้างเว็บไซต์ที่เรียบง่าย การออกแบบควรเรียบง่ายแต่ยังคงสื่อถึง สามารถมาในรูปแบบต่อไปนี้:
- เอฟเฟกต์ข้อความเทอร์มินัล: เอฟเฟกต์นี้เลียนแบบการพิมพ์บนตัวประมวลผลข้อความ คำจะกะพริบ แต่ความเร็วควรเหมาะสมพอให้ผู้ใช้อ่านผ่าน
- ภาพเคลื่อนไหวข้อความ: ข้อความในเอฟเฟ็กต์นี้สามารถเลื่อนขึ้น ลง หรือด้านข้าง
#2. เอฟเฟ็กต์โฮเวอร์ลิงก์
เว็บไซต์ทั่วไปจะมีการเชื่อมโยงหลายมิติที่เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าต่างๆ ลิงก์ดังกล่าวเพิ่มขึ้นเรื่อย ๆ เมื่อเว็บไซต์เติบโต เอฟเฟกต์การเลื่อนลิงก์สามารถมาในรูปแบบเหล่านี้ได้
- การเปลี่ยนสีลิงก์: สีของลิงก์จากสีน้ำเงินเป็นสีแดง
- การเปลี่ยนสีพื้นหลัง: ลักษณะพิเศษนี้จะเปลี่ยนสีพื้นหลังของลิงก์
- การสลับข้อความ: ลักษณะพิเศษนี้จะเปลี่ยนเนื้อหาของไอคอนลิงก์
#3. เอฟเฟ็กต์การเลื่อนปุ่ม
ปุ่มมีความสำคัญในเว็บไซต์เนื่องจากช่วยให้เราส่งแบบฟอร์มและเข้าถึงส่วนต่างๆ ของหน้าเว็บได้ เอฟเฟ็กต์โฮเวอร์บนปุ่มสามารถนำไปใช้ได้ในรูปแบบของ:
- เปลี่ยนสีข้อความ: สีของข้อความบนปุ่มที่ระบุว่า “คลิกฉัน” สามารถเปลี่ยนจากสีแดงเป็นสีเขียวเมื่อวางเมาส์เหนือ
- การเปลี่ยนสีพื้นหลัง: ปุ่ม HTML จะโปร่งใสตามค่าเริ่มต้น นักพัฒนาสามารถเพิ่มสีพื้นหลังให้กับปุ่มดังกล่าวได้ เมื่อวางเมาส์เหนือ สีพื้นหลังสามารถเปลี่ยนจากสีน้ำตาลเป็นสีเขียวได้
- เอฟเฟ็กต์การตีกลับ: คุณสามารถเพิ่มความดึงดูดสายตาให้กับผู้ใช้โดยการออกแบบปุ่มให้เด้งเมื่อโฮเวอร์
#4. เอฟเฟกต์โฮเวอร์รูปภาพ
- สลับภาพ: คุณสามารถสร้างภาพหมุนที่สลับเมื่อโฮเวอร์
- เลือนภาพเข้า/ออก: เอฟเฟ็กต์ดังกล่าวทำให้ภาพชัดเจนขึ้นเมื่อคุณวางเมาส์เหนือภาพ
ทดสอบการแลกเปลี่ยน: เป็นเรื่องปกติมากที่จะพบเว็บไซต์ที่ซ่อนคำอธิบายต่างๆ ไว้ในรูปภาพ ตัวอย่างเช่น เว็บไซต์ท่องเที่ยวสามารถแสดงรายละเอียดโรงแรมได้หลังจากที่ผู้ใช้วางเมาส์เหนือ
ตอนนี้เราสามารถอธิบายเอฟเฟกต์โฮเวอร์ CSS ที่ดีงามสำหรับเว็บไซต์ของคุณได้แล้ว
เปลี่ยนสีพื้นหลังเมื่อโฮเวอร์
เอฟเฟ็กต์นี้สามารถใช้ได้กับปุ่ม ลิงก์ หรือข้อความที่แสดงบนเว็บเพจ เมื่อเคอร์เซอร์ของเมาส์แตะที่เป้าหมาย สีพื้นหลังจะเปลี่ยนไป
คุณสามารถเปลี่ยนพื้นหลังของข้อความได้ในขั้นตอนเหล่านี้
- ใช้:เลื่อนระดับหลอกเพื่อให้บรรลุเป้าหมายของคุณ
- สร้างองค์ประกอบ เช่น div ปุ่ม หรือลิงก์ที่คุณจะใช้งานเอฟเฟ็กต์โฮเวอร์
นี่เป็นโค้ดตัวอย่างสำหรับใช้เอฟเฟ็กต์เหล่านี้
ไฟล์ HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> Hover and see me change!!!!! </div </body> </html>
ไฟล์ CSS
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
ก่อนโฮเวอร์ จะออก;
หลังจากโฮเวอร์ ผลลัพธ์จะเป็น;
เปลี่ยนสีลิงค์เมื่อโฮเวอร์
ลิงก์เป็นองค์ประกอบที่สำคัญในหน้าเว็บ เนื่องจากช่วยให้เราย้ายจากหน้าหนึ่งไปอีกหน้าหนึ่ง เราใช้แท็ก HTML เพื่อสร้างไฮเปอร์ลิงก์ การเปลี่ยนสีลิงก์เมื่อวางเมาส์เหนือจะเพิ่มการมองเห็นลิงก์
เราต้องการสิ่งต่อไปนี้เพื่อแสดงให้เห็นถึงผลกระทบนี้:
- สร้างแท็กตัวเลือกบนแท็ก :head หรือ :body ของคุณ
- กำหนด :hover pseudo-class
คุณสามารถใช้โค้ดตัวอย่างนี้เพื่อแสดงลิงก์ที่เปลี่ยนจากสีเขียวเป็นสีส้มเมื่อโฮเวอร์
ไฟล์ HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <a href="#">Hover over me and see the magic</a> </div </body> </html>
ไฟล์ CSS:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
เอาต์พุตก่อนโฮเวอร์
เอาต์พุตหลังจากโฮเวอร์เอฟเฟ็กต์
เลื่อนไฮไลท์เมื่อโฮเวอร์
เมื่อผู้ใช้วางเมาส์เหนือ เอฟเฟ็กต์นี้จะเพิ่มเงากล่องให้กับลิงก์แบบอินไลน์ สีของลิงค์จะเปลี่ยนไปในกระบวนการนี้ เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถทำตามขั้นตอนเหล่านี้เป็นแนวทางของคุณ
- เพิ่มช่องว่างรอบ ๆ ลิงก์ (บางอย่างเช่น 0 .25rem สามารถทำงานได้)
- เพิ่มระยะขอบที่มีค่าใกล้เคียงกัน สิ่งนี้จะป้องกันไม่ให้ช่องว่างภายในขัดขวางการไหลของข้อความ
คุณสามารถมีสิ่งนี้เป็นไฟล์ html อย่างง่าย:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <a href="#">admintrick.com</a> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> </body> </html>
นี่อาจเป็นไฟล์ CSS ของคุณ
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}
ก่อนเอฟเฟกต์โฮเวอร์
หลังจากโฮเวอร์เอฟเฟ็กต์
ขีดเส้นใต้สายรุ้งเมื่อโฮเวอร์
เอฟเฟ็กต์นี้เพิ่มการขีดเส้นใต้หลายสีให้กับข้อความเมื่อวางเมาส์เหนือ
- ใช้:คลาสจำลองเชิงเส้นไล่ระดับสีเพื่อสร้างการเปลี่ยนแปลงที่ราบรื่นระหว่างสีต่างๆ
- ใช้ :hover pseudo-class เพื่อให้บรรลุเป้าหมายของคุณ
- สร้างองค์ประกอบลิงก์ที่คุณจะใช้เอฟเฟ็กต์โฮเวอร์
นี่คือโค้ดตัวอย่างเพื่อใช้ขีดเส้นใต้สีรุ้งเมื่อโฮเวอร์:
ไฟล์ HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <p>This is <a href="#">Rainbow</a> hover effect. </p> </div </body> </html>
ไฟล์ CSS:
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}
ก่อนวางเมาส์เหนือ
หลังจากเลื่อน;
การสลับข้อความเมื่อโฮเวอร์
การสลับทดสอบคือเมื่อข้อความถูกสลับกับเนื้อหาหรือข้อความอื่นเมื่อผู้ใช้วางเมาส์เหนือเป้าหมาย ตัวอย่างที่สมบูรณ์แบบคือการที่เว็บไซต์มีลิงก์ “ความคิดเห็น” หลังจากที่วางเมาส์เหนือแล้ว ข้อความลิงก์จะเปลี่ยนเป็น “ความคิดเห็น” ได้
หากต้องการใช้การสลับข้อความเมื่อโฮเวอร์ คุณต้องมีสิ่งต่อไปนี้:
- ::before และ ::after pseudo-elements- สิ่งเหล่านี้สร้างองค์ประกอบแยกต่างหากสำหรับข้อความที่จะสลับหลังจากโฮเวอร์
- :hover องค์ประกอบหลอกที่เปลี่ยนตำแหน่งหรือการมองเห็นของเนื้อหาเมื่อโฮเวอร์
นี่คือภาพประกอบของวิธีการใช้เอฟเฟ็กต์นี้:
ไฟล์ HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <button><span>99 comments</span></button> </body> </html>
ไฟล์ CSS:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
ก่อนวางเมาส์เหนือ
หลังจากเลื่อน;
เว็บไซต์ที่มีเอฟเฟกต์โฮเวอร์ที่ยอดเยี่ยม
หากคุณต้องการยืมไอเดียและรับแรงบันดาลใจ นี่คือบางเว็บไซต์ที่คุณสามารถตรวจสอบได้
#1. แคนวา
Canva เป็นชื่อที่ยิ่งใหญ่ในโลกการออกแบบเนื่องจากช่วยให้ผู้ที่ไม่ใช่นักออกแบบสร้างงานออกแบบที่สวยงามได้ เว็บไซต์นี้มีเอฟเฟ็กต์โฮเวอร์ที่ยอดเยี่ยม ตั้งแต่หน้าแรกไปจนถึงหน้าผลิตภัณฑ์ ทุกอย่างเริ่มต้นด้วยพื้นหลังเบลอสีเข้มในหน้าแรก อย่างไรก็ตาม พื้นหลังจะถูกลบเมื่อโฮเวอร์ และภาพจะมองเห็นได้ เอฟเฟ็กต์โฮเวอร์ยังปรากฏขึ้นเมื่อคุณเลือกเทมเพลตการออกแบบต่างๆ
#2. บ้าน
Haus เป็นตัวอย่างที่สมบูรณ์แบบของเว็บไซต์ที่ใช้การขีดเส้นใต้เมื่อวางเมาส์เหนือ สลับข้อความเมื่อวางเมาส์เหนือ และเปลี่ยนสีพื้นหลังเมื่อวางเมาส์เหนือ
#3. งานหลัก
Mainworks ใช้ทั้งแอนิเมชั่นและทรานซิชันสำหรับเอฟเฟ็กต์โฮเวอร์ เอฟเฟ็กต์ที่โดดเด่นบางอย่างคือการสลับข้อความเมื่อโฮเวอร์ เปลี่ยนสีข้อความ และซูมข้อความและรูปภาพเมื่อโฮเวอร์
บทสรุป
ตัวเลือกของเอฟเฟ็กต์โฮเวอร์เพื่อเพิ่มในเว็บไซต์ของคุณจะขึ้นอยู่กับประเภทเว็บไซต์ ทักษะ รสนิยม และความชอบของคุณ บางไซต์ เช่น แพลตฟอร์มศิลปะและคูปอง อาจรองรับเอฟเฟกต์โฮเวอร์ที่ฉูดฉาด ในทางกลับกัน เว็บไซต์ด้านกฎหมายและการแพทย์อาจเลือกให้มีผลโฮเวอร์น้อยที่สุด
ดังนั้น คุณต้องหาว่าอะไรที่เหมาะกับเว็บไซต์ของคุณ อย่างไรก็ตาม ตรวจสอบให้แน่ใจว่าเอฟเฟกต์เหล่านี้สอดคล้องกับสีของแบรนด์ของคุณ ตรวจสอบทรัพยากร CSS ที่ดีที่สุดของเราเพื่อขัดเกลาทักษะ CSS ของคุณ
