จากผู้เขียน:บทเรียนหลายบทเกี่ยวกับการสร้างเอฟเฟกต์โฮเวอร์ CSS บริสุทธิ์เชื่อมโยงกับทิศทางของเคอร์เซอร์ บทเรียนนี้มีไว้สำหรับผู้ที่มีความรู้พื้นฐานเกี่ยวกับ HTML และความรู้ขั้นสูงเกี่ยวกับ CSS/SASS เป็นอย่างน้อย

ข้อสงวนสิทธิ์

เอฟเฟกต์ไม่ทำงานในเบราว์เซอร์รุ่นเก่า ต้องใช้เบราว์เซอร์ที่สามารถเรนเดอร์การแปลงสามมิติได้ ฉันทดสอบเอฟเฟกต์ใน เวอร์ชันล่าสุดเบราว์เซอร์ Chrome, Firefox และ Safari

ฉันยังใช้ไลบรารี AutoPrefixer ที่ยอดเยี่ยมเพื่อทดแทนคำนำหน้าผู้ขายโดยอัตโนมัติ ไปที่การตั้งค่าของ CodePen ไปที่แท็บ CSS แล้วเลือก AutoPrefixer

เอฟเฟกต์โฮเวอร์พร้อมพารัลแลกซ์

การแนะนำ

ฉันกับดีไซเนอร์ได้เจอกัน หน้าแรกเว็บไซต์ เทศกาลกิ๊กย้อนกลับไปในปี 2558 ได้ใช้การ์ดที่มีเอฟเฟกต์พารัลแลกซ์เมื่อวางเมาส์เหนือเคอร์เซอร์ เราชอบมันและต้องการสร้างเอฟเฟกต์นี้ขึ้นมาใหม่ในโครงการของเรา อย่างไรก็ตาม เนื่องจากลักษณะของโค้ด เราจึงไม่สามารถใช้ JS ได้ ฉันเริ่มค้นหาโซลูชัน CSS ล้วนๆ และพบสิ่งที่น่าสนใจ

ตัวหนอนผู้ทรงอำนาจ

หนึ่งในตัวเลือกที่ฉันชื่นชอบใน CSS คือเครื่องหมายทิลเดอ (~) ซึ่งเลือกองค์ประกอบที่ใกล้เคียงที่สุดที่ตรงกับตัวเลือก แต่จะอยู่หลังองค์ประกอบแรก ตัวอย่างเช่น ul ~p จะเลือกองค์ประกอบ p ในโค้ดด้านล่าง:

< div > < ul > < / ul > < ol > < / ol > < p > < / p > < p > < / p > < / div >

ฉันรู้ว่าสิ่งนี้สามารถใช้เพื่อสร้างเอฟเฟกต์โฮเวอร์ตามทิศทางของเคอร์เซอร์ได้เกือบทุกอย่าง!

โครงสร้าง

โครงสร้างลิงก์ค่อนข้างง่าย - คอนเทนเนอร์ที่มีชุดแท็ก และคอนเทนเนอร์สำหรับเนื้อหาการ์ด แอตทริบิวต์ href ทั้งหมดต้องมี URL เดียวกัน

เนื้อหา

< div class = "container" > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < div class = "card" > < h1 >เนื้อหา< / h1 > < / div > < / div >

มาเพิ่ม SASS/CSS เพื่อวางตำแหน่งลิงก์ทั้งหมดที่มุมของการ์ด คุณสามารถสร้างลิงก์เพิ่มเติมได้ แต่เพื่อความง่าย เราจะใช้สี่ลิงก์ เพื่อเร่งกระบวนการเราจะใช้ Haml

เนื่องจากเราไม่มี JS เพื่อแจ้งเตือนทิศทางการเคลื่อนที่ของเมาส์และตำแหน่งเคอร์เซอร์ เราจะใช้ลิงก์ เพื่อแบ่งการ์ดออกเป็นโซนการตรวจจับ ตัวอย่างเช่น หากเคอร์เซอร์ไปอยู่ที่ลิงก์ หมายเลข 1 อยู่ด้านบน จากนั้นเมาส์จะเข้าสู่โซนการตรวจจับหมายเลข 1 ก่อนเข้าหมายเลข 3 และหมายเลข 4

เอฟเฟกต์โฮเวอร์

ก ( &:โฮเวอร์, &:โฟกัส ( ~ .card ( // รหัส CSS ) ) )

& : โฮเวอร์ , & : โฟกัส ( - การ์ด ( // รหัส CSS

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

การเปลี่ยนแปลง

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

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

ตัวอย่างเช่น หากเราเข้าสู่โซนการตรวจจับหมายเลข 1 (ซ้ายบน) แหล่งกำเนิดการเปลี่ยนแปลงควรอยู่ด้านล่างขวา เช่น มุมตรงข้าม สิ่งสำคัญที่สุดคือ: มุมที่ได้รับผลกระทบควรเคลื่อนออกจากเรา และมุมที่เหลือควรเคลื่อนเข้าหาเรา

สัมผัสสุดท้าย

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

// border styles.card ( ตำแหน่ง: สัมพันธ์; .border ( ต้นกำเนิดการแปลง: ศูนย์กลางตรงกลาง ตำแหน่ง: สัมบูรณ์ ด้านบน: 12px ซ้าย: 12px ความกว้าง: คำนวณ (100% - 24px) ความสูง: คำนวณ (100% - 24px); เส้นขอบ: 2px สีขาวทึบ; ) ) // parallax effect.container ( a ( &:hover, &:focus ( ~ .card ( .border ( แปลง: TranslateZ(24px); ) ) // ดันเฟรม กลับมาเมื่อคลิก &:active ( ~ .card ( .border ( แปลง: none; ) ) ) ) )

// สไตล์เฟรม การ์ด ( ตำแหน่ง: ญาติ; ชายแดน ( แปลง - กำเนิด : ศูนย์ ศูนย์ ; ตำแหน่ง: แน่นอน; ด้านบน: 12px; ซ้าย: 12px; ความกว้าง: คำนวณ (100% - 24px); ความสูง: คำนวณ (100% - 24px); ขอบ : 2px สีขาวทึบ ; // เอฟเฟกต์พารัลแลกซ์ คอนเทนเนอร์ ( & : โฮเวอร์ , & : โฟกัส ( - การ์ด ( ชายแดน ( แปลงร่าง: แปล Z(24px); // ดันเฟรมกลับด้วยการคลิก & : คล่องแคล่ว ( - การ์ด ( ชายแดน ( แปลงร่าง: ไม่มี;

สิ่งที่เหลืออยู่คือ (1) เพิ่มการเปลี่ยนผ่านไปยังการ์ดเพื่อทำให้การเปลี่ยนในมุมราบรื่นขึ้น และ (2) ลบรูปแบบลิงก์ออกเพื่อไม่ให้มองเห็นได้ ฉันชอบตั้งค่าความทึบเป็น 0 เพื่อหลีกเลี่ยงเหตุการณ์ต่างๆ เพื่อหลีกเลี่ยงการทับซ้อนกันเนื่องจากการหมุนเวียนการ์ด ฉันจึงย้ายลิงก์ที่โฮเวอร์ไปข้างหน้าด้วย

ผลลัพธ์

ด้านล่างนี้คือเอฟเฟกต์โฮเวอร์พารัลแลกซ์เวอร์ชันที่สมบูรณ์ รหัสปากกา- สลับช่องทำเครื่องหมายเพื่อดูตำแหน่งของลิงก์ เพื่อปรับปรุงเอฟเฟกต์พารัลแลกซ์ ฉันตัดสินใจเพิ่มลิงก์เพิ่มเติม

เอฟเฟกต์โฮเวอร์โดยใช้คิวบ์เป็นตัวอย่าง

การแนะนำ

ว่ายน้ำผู้ใหญ่เดี่ยว 2559เป็นอีกไซต์หนึ่งที่มีเอฟเฟกต์โฮเวอร์ที่น่าประทับใจตามทิศทางของเคอร์เซอร์ โดยคลิกที่ไอคอนปฏิทินทางด้านซ้าย มุมบนปฏิทิน 3 มิติจะเปิดขึ้น โดยในแต่ละวันจะแสดงเป็นลูกบาศก์ ซึ่งจะหมุนตามทิศทางของเคอร์เซอร์ ความคิดที่ดี!

ฉันรู้ทันทีว่าสามารถสร้างเอฟเฟกต์ที่คล้ายกันได้โดยใช้เครื่องหมายตัวหนอน ฉันมีรูปร่างลูกบาศก์อยู่แล้วซึ่งสามารถแก้ไขลิงก์และเอฟเฟกต์พารัลแลกซ์โฮเวอร์ได้อย่างง่ายดาย

พื้นฐาน

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

< div class = "link" > < a href = "http://codepen.io/gabriellewee/"> < / a > < div >เนื้อหาด้านหน้า< / div > < div >เนื้อหาด้านหลัง< / div > < / div > < / div >

เพื่อสร้างลิงค์รูปสามเหลี่ยมที่คุณสามารถใช้ได้ คลิปปี้- เพื่อให้เข้ากันได้กับ Firefox คุณต้องมีคลิปพาธ SVG ด้วย ลิงก์จะต้องมีค่า TranslationZ ที่เป็นค่าบวก (นำมาไว้ด้านหน้า) ไม่เช่นนั้นลิงก์จะซ่อนอยู่หลังคิวบ์

เพื่อกำหนดความกว้าง ความสูง และการแปลงสำหรับคิวบ์ เราใช้ตัวแปรที่มีค่า 12px เพื่อแยกแยะด้านข้างของลูกบาศก์ เราใช้เฉดสีเดียวกันที่มีสีต่างกันเพื่อจำลองแสง ด้านหลังเป็นสีขาวล้วน

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

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

เอฟเฟกต์โฮเวอร์

ถัดไปคุณจะต้องเพิ่มการหมุนเมื่อโฮเวอร์ คุณสามารถกำหนดเอฟเฟกต์ได้ตามที่คุณต้องการ แต่วิธีที่สมจริงที่สุดที่ฉันพบนั้นผูกติดอยู่กับเมาส์ หากเมาส์เข้าไปในลูกบาศก์จากซ้าย ลูกบาศก์ควรหมุนจากซ้ายไปขวา ทุกเทิร์นต้องเป็น 180deg/0.5turn หรือเทียบเท่าเชิงลบ นอกจากนี้เรายังจะเพิ่มการเปลี่ยนแปลงเพื่อให้ลูกบาศก์หมุนได้อย่างถูกต้อง

ขัด

ต้องขัดสองสิ่ง:

สามเหลี่ยมด้านล่างจะเปลี่ยนข้อความด้านหลังกลับหัว

การเลื่อนเมาส์ไวเกินไป: การเปลี่ยนระหว่างรูปสามเหลี่ยมทำให้เกิดการเลี้ยวโดยไม่จำเป็น

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

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

ผลลัพธ์

บทสรุป

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

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

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

กระตุกขึ้น

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

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

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

ซีเอสเอส

Ex1 img ( เส้นขอบ: 5px solid #ccc; float: ซ้าย; ระยะขอบ: 15px; -webkit-transition: ระยะขอบ 0.5s ค่อย ๆ ออก; -moz-transition: ระยะขอบ 0.5s ค่อย ๆ ออก; -o-transition: ระยะขอบ 0.5s คลายออก; ) .ex1 img:hover ( ขอบด้านบน: 2px; )

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

สำหรับ เอฟเฟกต์นี้ใช้ชุดรูปภาพขนาด 400x133 พิกเซล จากนั้นจะถูกลดขนาดในโค้ด CSS เหลือ 300x100 px และขยายเมื่อวางเมาส์ไว้ มีการใช้การจัดกึ่งกลางแนวนอน และรูปภาพที่ปรับขนาดอาจทำให้ทุกอย่างเสียหาย ดังนั้นจึงใช้ค่าระยะขอบติดลบเพียงครึ่งหนึ่งของความกว้าง

ซีเอสเอส

#container ( width: 300px; Margin: 0 auto; ) #ex2 img( height: 100px; width: 300px; Margin: 15px 0; -webkit-transition: all 1s Ease; -moz-transition: all 1s Ease; -o -การเปลี่ยนแปลง: ง่ายทั้งหมด 1 วินาที; ) #ex2 img:hover ( ความสูง: 133px; ความกว้าง: 400px; ระยะขอบซ้าย: -50px; )

เอฟเฟกต์นี้คล้ายกันมาก โดยใช้จาวาสคริปต์เมื่อคุณวางเมาส์เหนือวัตถุชิ้นหนึ่ง อีกชิ้นหนึ่งจะปรากฏขึ้น เพื่อให้บรรลุเป้าหมายนี้ รูปภาพและข้อความจะถูกวางไว้ในคอนเทนเนอร์ div เดียวกัน จากนั้นทุกอย่างจะเลื่อนไปทางซ้ายเพื่อให้องค์ประกอบทั้งสองอยู่ในระดับเดียวกัน จากนั้นเราก็ใช้คุณสมบัติ สี: โปร่งใสและ ความสูงของบรรทัด: 0pxสำหรับองค์ประกอบ div วิธีนี้จะวางข้อความไว้ที่ด้านบนของ div และซ่อนไว้

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

ซีเอสเอส

#ex3 ( กว้าง: 730px; ความสูง: 133px; ความสูงบรรทัด: 0px; สี: โปร่งใส; ขนาดตัวอักษร: 50px; ตระกูลแบบอักษร: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; การแปลงข้อความ: ตัวพิมพ์ใหญ่; -webkit-transition: ทั้งหมด 0.5 วินาที; -moz-transition: ทั้งหมด 0.5 วินาที; ex3:hover ( line-height: 133px; color: #575858; ) #ex3 img( ลอย: ซ้าย; ระยะขอบ: 0 15px; )

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

สำหรับเอฟเฟกต์นี้มีสิ่งใหม่มากมายโดยเฉพาะ เบราว์เซอร์เฉพาะ คุณสมบัติซีเอสเอสดังนั้นจึงใช้ไม่ได้กับเบราว์เซอร์รุ่นเก่า แกลเลอรีใช้เงา การเปลี่ยนภาพ และการแปลง

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

ซีเอสเอส

#ex4 ( ความกว้าง: 800px; ระยะขอบ: 0 อัตโนมัติ; ) #ex4 img ( ระยะขอบ: 20px; เส้นขอบ: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); - moz-box-shadow: 4px 4px 4px rgba (0,0,0,0.2); box-shadow: 4px 4px 4px rgba (0,0,0,0.2); -webkit-transition: การผ่อนผันทั้งหมด 0.5 วินาที; -moz-transition: ทั้งหมด 0.5s ง่าย; -o-transition: ทั้งหมด 0.5s ง่าย; ) #ex4 img:hover ( -webkit-transform: หมุน(-7deg); -moz-transform: หมุน(-7deg); - o-แปลง: หมุน (-7deg);

นี่เป็นเอฟเฟกต์ที่ยอดเยี่ยมและซับซ้อน ในตอนแรก รูปภาพจะมีความโปร่งใสเล็กน้อย จากนั้นเมื่อเคอร์เซอร์เลื่อนเมาส์ไปเหนือรูปภาพ ความโปร่งใสจะถูกลบออกทั้งหมด มีแสงเรืองแสงรอบๆ และเงาสะท้อนจะปรากฏขึ้น (สำหรับเบราว์เซอร์ Webkit เท่านั้น)

ซีเอสเอส

#ex5 ( ความกว้าง: 700px; ระยะขอบ: 0 อัตโนมัติ; ความสูงขั้นต่ำ: 300px; ) #ex5 img ( ระยะขอบ: 25px; ความทึบ: 0.8; เส้นขอบ: 10px solid #eee; /*การเปลี่ยนแปลง*/ -webkit-transition: ทั้งหมด 0.5 ความสะดวก s; -moz-transition: ทั้งหมด 0.5s ง่าย; -o-transition: ทั้งหมด 0.5s ง่าย; จาก(โปร่งใส), color-stop(.7, โปร่งใส), ถึง(rgba(0,0,0,0.1)) ) #ex5 img:hover ( ความทึบ: 1; /*Reflection*/ -webkit-box -reflect : ต่ำกว่า 0px -webkit-gradient(เชิงเส้น, บนซ้าย, ล่างซ้าย, จาก (โปร่งใส), หยุดสี (.7, โปร่งใส), ถึง (rgba(0,0,0,0.4)) เรืองแสง*/ - webkit-box-เงา: 0px 0px 20px rgba (255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);

บทสรุป

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

การใช้เอฟเฟกต์โฮเวอร์ CSS ต่างๆ เมื่อโฮเวอร์เหนือรูปภาพ ลิงก์ หรือข้อความ เป็นหนึ่งในเทคนิค CSS ที่พบบ่อยที่สุด

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

1. เอฟเฟกต์โฮเวอร์สุดเก๋ 10 แบบ

ตามชื่อ นี่คือคอลเลกชั่นเอฟเฟกต์โฮเวอร์ที่มีสไตล์เหลือเชื่อ 10 รายการ

แหล่งที่มา

2. เอฟเฟกต์โฮเวอร์ที่รับรู้ทิศทาง

เมื่อคุณวางเมาส์ไว้เหนือ องค์ประกอบต่างๆ, เอฟเฟกต์โฮเวอร์ CSS เมื่อโฮเวอร์ตามเคอร์เซอร์และสร้างงานนำเสนอ 3 มิติที่น่าทึ่ง

แหล่งที่มา

3. เอฟเฟกต์โฮเวอร์ของ Wacom

นี่เป็นเอฟเฟกต์ที่ค่อนข้างถูกแฮ็กอยู่แล้ว แต่หลายคนยังคงสนุกกับการใช้มัน การนำเสนอนั้นเรียบง่ายแต่น่าดึงดูด

แหล่งที่มา

4. เอฟเฟกต์โฮเวอร์ CSS3

หากคุณกำลังมองหาเอฟเฟกต์โฮเวอร์แบบวงกลม คุณจะพบสิ่งที่น่าสนใจได้ที่นี่ มีเอฟเฟกต์เฟรมโฮเวอร์ CSS ที่แตกต่างกันทั้งหมด 12 แบบ

แหล่งที่มา

5. โฮเวอร์แอนิเมชันจาก UNIQLO

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

แหล่งที่มา

6. เอฟเฟกต์การเลื่อนปุ่ม

ต่อไปนี้เป็นเอฟเฟกต์โฮเวอร์ที่น่าประทับใจสำหรับปุ่มต่างๆ ทั้งหมดนี้เหมาะสำหรับเว็บไซต์ทุกประเภท

แหล่งที่มา

7. เอฟเฟกต์โฮเวอร์ที่น่าทึ่ง 10 แบบ

ชุดเอฟเฟกต์โฮเวอร์ CSS อีก 10 ชุดสำหรับปุ่ม ส่วนใหญ่ค่อนข้างน่าประทับใจ

แหล่งที่มา

8. เอฟเฟกต์โฮเวอร์ CSS3 2

นี่คือคอลเลกชันของเอฟเฟกต์โฮเวอร์รูปภาพที่แตกต่างกันสี่แบบ ชื่อและคำอธิบายของเอฟเฟกต์จะแสดงควบคู่ไปด้วย

แหล่งที่มา

9. ตีกลับเมื่อโฮเวอร์

นี่เป็นเอฟเฟกต์โฮเวอร์ที่สนุกสนานและน่าสนใจสำหรับรูปภาพ กรอบกลมเหมาะอย่างยิ่งสำหรับการนำไปใช้กับอวตารของสมาชิกในทีมและรูปภาพแนะนำ

แหล่งที่มา

10. โฮเวอร์ 8 บิต

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

แหล่งที่มา

11. เอฟเฟกต์โฮเวอร์ชื่อเรื่องอย่างง่าย

เมื่อคุณวางเมาส์เหนือรูปภาพ เอฟเฟกต์นี้จะแสดงชื่อเรื่องบนพื้นหลังที่มีความทึบต่ำ

แหล่งที่มา

12. เอฟเฟกต์พลิกลง

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

แหล่งที่มา

13. รางวัลแห่งความอยากรู้อยากเห็น

คุณจะไม่เข้าใจความสวยงามของเอฟเฟกต์นี้จนกว่าคุณจะวางเมาส์ไว้เหนือรูปภาพ เส้นสุ่มจะถูกเปลี่ยนเป็นโลโก้อย่างสวยงาม จากนั้นจึงทาสีด้วยสี

แหล่งที่มา

14. เอฟเฟกต์โฮเวอร์รูปภาพ

นี่เป็นเอฟเฟกต์โฮเวอร์ CSS ที่น่าทึ่งสำหรับเฟรมรูปภาพ การที่ภาพหนึ่งปรากฏปะทะกับอีกภาพหนึ่งนั้นช่างเหลือเชื่อ!

แหล่งที่มา

15. โฮเวอร์แอนิเมชั่น

เมื่อคุณวางเมาส์เหนือรูปภาพ ความทึบจะลดลง โดยเน้นที่ลิงก์

แหล่งที่มา

16. เลื่อนฉันพี่ชาย

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

แหล่งที่มา

17. เอฟเฟกต์โฮเวอร์ Nautilus SCSS HAML

นี่คือเอฟเฟกต์โฮเวอร์โฆษณาที่มีให้เลือกหลายรูปแบบ พวกเขาเสนอ โอกาสพิเศษสำหรับการออกแบบภาพ

แหล่งที่มา

18. เอฟเฟกต์โฮเวอร์เส้นขอบ SVG 1

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

แหล่งที่มา

19. ไอคอนแผนที่การค้นหาแบบโฮเวอร์

คุณต้องการเอฟเฟกต์โฮเวอร์ CSS บนโฮเวอร์สำหรับแถบค้นหาหรือไอคอนแผนที่ของคุณหรือไม่? นี่คือเขานั่นเอง การเปลี่ยนแปลงที่ราบรื่นของมันคือ ความสุขที่แท้จริงสำหรับดวงตา

แหล่งที่มา

20. บานหน้าต่างไอคอนโซเชียล

เอฟเฟกต์โฮเวอร์นี้สามารถใช้เพื่อซ่อนไอคอนที่จุดเริ่มต้นได้ สื่อสังคมแล้วแสดงเมื่อผู้ใช้เลื่อนเมาส์ไปเหนือพวกเขา

แหล่งที่มา

21. ข้อมูลการเพิ่มรายการสินค้า

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

แหล่งที่มา

22. ซองจดหมายแบบเคลื่อนไหว

เอฟเฟกต์โฮเวอร์ CSS ที่สมบูรณ์แบบบนโฮเวอร์สำหรับ "ส่วน" เชื่อมต่อกับเรา- มันแสดง ข้อมูลติดต่อในซองป๊อปอัป แต่หลังจากที่ผู้ใช้โฮเวอร์เหนือรูปภาพเท่านั้น

แหล่งที่มา

23. กลับสู่ด้านบน

เอฟเฟ็กต์โฮเวอร์ที่เป็นเอกลักษณ์สำหรับปุ่ม Back to Top ช่วยให้ผู้เยี่ยมชมของคุณมีตัวชี้ภาพเคลื่อนไหวที่สวยงาม

แหล่งที่มา

24. แฟนซีโฮเวอร์

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

แหล่งที่มา

25. ไอคอนเตือนความจำ เอฟเฟกต์โฮเวอร์

เอฟเฟกต์โฮเวอร์ CSS นี้เพิ่มสไตล์ที่สวยงามให้กับรูปภาพ

แหล่งที่มา

26. โฮเวอร์รูปภาพวงกลม

เอฟเฟกต์โฮเวอร์สำหรับรูปภาพวงกลม เอฟเฟกต์โฮเวอร์มีสี่สไตล์ที่แตกต่างกันในคอลเลกชัน

แหล่งที่มา

27. เอฟเฟกต์โฮเวอร์ไอคอน Safari

เอฟเฟกต์โฮเวอร์ CSS นี้จะสร้างแอนิเมชั่นไอคอน Safari ขึ้นมาใหม่เมื่อโฮเวอร์ คุณสามารถแทนที่ไอคอนได้ ภาพลักษณ์ของตัวเองหรือโลโก้

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

การพัฒนาเว็บไซต์สามด้าน

จากมุมมองที่เป็นทางการ มีองค์ประกอบหลักสามส่วน (ในรูปแบบวากยสัมพันธ์ที่แตกต่างกัน) ที่ประกอบเป็นเว็บไซต์: โค้ด PHP, โค้ด JavaScript และคำอธิบาย สไตล์ CSS- ไม่สำคัญเลยว่าจะใช้ชื่อและเวอร์ชันของส่วนประกอบนี้หรือส่วนประกอบใด ใช้มาร์กอัป HTML เวอร์ชันใด และเบราว์เซอร์เวอร์ชันใดที่ติดตั้งอยู่ ความเข้ากันได้ไม่ได้รับการยกย่องอย่างสูงในทุกวันนี้เพราะว่า มีความเกี่ยวข้องในทุกช่วงเวลา: สิ่งที่เข้ารหัสและสิ่งที่เข้ารหัสสามารถแสดงและดำเนินการได้.

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

ส่วนบุคคลและสาธารณะ

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

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

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

กฎข้อแรก: หวังว่าจะได้มาตรฐาน แต่อย่าทำผิดพลาดด้วยตัวเอง

CSS:โฮเวอร์คือเมื่อเมาส์ “เข้าสู่” องค์ประกอบของหน้า เมื่อคลิกเมาส์บนองค์ประกอบ องค์ประกอบนั้นจะเริ่มทำงาน แต่เมื่อเคอร์เซอร์เลื่อนไปด้านข้าง องค์ประกอบนั้นจะสามารถเปลี่ยนและแสดงตัวเองในสถานะใช้งานอยู่ได้อีกครั้ง “:hover”, “active” และ “visited” เป็นคลาสหลอกที่ได้รับความนิยมมากที่สุดเมื่ออธิบายสไตล์

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

สีพื้นหลัง: สีเขียว;

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

กฎข้อที่สอง: เมื่อเชื่อถือมาตรฐาน ให้เน้นที่โค้ดของคุณ

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

ในทางกลับกันเฉพาะในอุปกรณ์ที่มีหน้าจอสัมผัสแบบพิเศษเท่านั้นจึงจะสามารถจัดการนิ้วได้โดยตรง หน้าจอสัมผัสดังที่แพร่หลายไปแล้วบนสมาร์ทโฟน แท็บเล็ต และอุปกรณ์ที่คล้ายกัน

มีความแตกต่างที่สำคัญและ:โฮเวอร์ที่นี่ใช้ไม่ได้ตามที่เราต้องการ คุณไม่สามารถทำได้หากไม่มีโค้ด และการใช้สื่อคิวรี่ไม่ได้แก้ปัญหาทั้งหมด

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

ปุ่มและองค์ประกอบหน้าอื่นๆ

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

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

ข้อผิดพลาดในสไตล์ชีท

เป็นไปไม่ได้ที่จะบอกว่ามาตรฐานในด้านการอธิบายสไตล์ CSS ไม่รู้ว่ากำลังทำอะไรอยู่ แต่ก็เป็นไปไม่ได้ที่จะบอกว่าพวกเขามีปฏิสัมพันธ์กับมาตรฐานอื่น ๆ ในด้านการเขียนโปรแกรมอินเทอร์เน็ตอย่างเต็มที่

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

การใช้ AJAX เมื่อไม่จำเป็นต้องสร้างหน้าใหม่เพื่อแสดงปฏิกิริยาต่อการกระทำของผู้เข้าชม แต่การเปลี่ยนองค์ประกอบหรือองค์ประกอบหลายอย่างจะช่วยเพิ่ม "เครื่องเทศ" เล็กน้อย "มิตรภาพ" ของรหัส - สิ่งที่มีอยู่แล้วในเบราว์เซอร์ (JavaScript) และสิ่งที่อยู่บนเซิร์ฟเวอร์ (PHP) - เป็นจำนวนมากของผู้เขียนไซต์ (โปรแกรมเมอร์)

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

มาตรฐานและการจำลอง

สามารถจำลองโฮเวอร์ผ่าน JavaScript ได้โดยใช้เหตุการณ์ onmouseover และ onmouseout บ่อยครั้งนี่คือจุดสิ้นสุดของเรื่อง จากมุมมอง การใช้ความคิดเบื้องต้น, เมื่อไร เรากำลังพูดถึงเมื่อพูดถึงการสร้างเว็บไซต์ที่ใช้งานได้จริง การควบคุมด้วยมือของคุณเองจะดีกว่าปล่อยให้มันอยู่ภายใต้ความเมตตาของมาตรฐานในตำนานที่เปลี่ยนแปลงไปนอกเจตจำนงและความปรารถนาของนักพัฒนา

บางครั้งคุณสามารถอ่านข้อความเช่น "คุณลักษณะนี้ใช้ได้แม้ใน IE" แต่บ่อยครั้งที่คุณสามารถอ่านเกี่ยวกับคำอธิบายสไตล์ที่เบราว์เซอร์เฉพาะยอมรับได้ บ่อยครั้งที่คุณสามารถเรียนรู้ว่า JavaScript แตกต่างกันอย่างไรในเบราว์เซอร์บางตัว

ประเมินประสบการณ์ที่สั่งสมมา ชื่นชมความสามารถของ Chrome และ Opera วิจารณ์ความล่าช้าและความเฉื่อยของเบราว์เซอร์จากผู้ผลิต (โปรแกรมเมอร์ IE ที่น่าจดจำจาก Microsoft ซึ่งเป็นที่รักของโปรแกรมเมอร์ทุกคน: "แก่แล้ว อินเทอร์เน็ตเอ็กซ์พลอเรอร์มีเพียงคนขี้เกียจเท่านั้นที่ไม่ดุ หรือคนที่รู้วิธีเล่น Klondike บนคอมพิวเตอร์เท่านั้น”- คำพูดจากผู้เขียนอินเทอร์เน็ตที่ไม่รู้จัก) คุณควรยึดถือค่าเฉลี่ยสีทอง: ใช้สิ่งที่ใช้ได้ผลทุกที่และเสมอ

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

การจำลองและการควบคุม

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

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

ก่อนอื่น สำหรับผู้ที่ยังไม่ครบถ้วนในหัวเรื่องหรือไม่ได้อยู่ในหัวเรื่องเลย ผมจะอธิบายสั้นๆ ว่าเอฟเฟกต์ของโฮเวอร์คืออะไร นี้ ชนิดที่แตกต่างกันเอฟเฟ็กต์ (คำอธิบายภาพป๊อปอัป คำแนะนำเครื่องมือ การเปลี่ยนภาพที่ราบรื่น การแปลง การหมุน การขยาย การแทนที่ ฯลฯ ฯลฯ) ที่ใช้กับองค์ประกอบของเว็บไซต์เมื่อวางเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบเหล่านั้น เอฟเฟกต์เหล่านี้สามารถรับรู้ได้โดยใช้สิ่งต่าง ๆ ปลั๊กอิน jQueryและใน CSS3 ล้วนๆ
วันนี้ฉันเตรียม มีให้เลือกมากมายเอฟเฟกต์โฮเวอร์ดั้งเดิมสำหรับรูปภาพที่สร้างด้วย ใช้ CSS 3 โดยไม่ต้องเชื่อมต่อไลบรารีจาวาสคริปต์ ฉันจะไม่พูดถึงข้อดีและข้อเสียของการใช้เอฟเฟกต์โฮเวอร์ใน CSS3 ล้วนๆ นั่นเป็นอีกหัวข้อหนึ่ง แค่ดูตัวอย่าง และใช้อันที่คุณชอบบนเว็บไซต์ของคุณ หากจำเป็น เอฟเฟกต์ทั้งหมดที่นำเสนอในการทบทวนมีให้พร้อมตัวอย่างสาธิตและเอกสารประกอบโดยละเอียดพร้อมซอร์สโค้ด คู่มือส่วนใหญ่เป็นภาษาชนชั้นกลาง แต่ทุกอย่างก็ใช้งานง่ายไม่มากก็น้อย

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

เพื่อไม่ให้ภาพรวมเสียหาย ฉันไม่ได้บิดเบือนชื่อของเอฟเฟกต์ด้วยการแปลด้วยคอมพิวเตอร์ (ยกเว้นบางส่วน) ฉันจึงทิ้งชื่อดั้งเดิมไว้ตามที่นักพัฒนาเรียกมัน

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

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

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

เอฟเฟ็กต์การเปลี่ยนแปลงที่เรียบง่ายมาก โดยไม่มีเสียงระฆังและนกหวีดพิเศษใดๆ เลย ภาพทรงกลมในเฟรม แปลงร่างโดยเปลี่ยนโฟกัสเมื่อโฮเวอร์ ก็แค่นั้นแหละ

เอฟเฟกต์โฮเวอร์สำหรับภาพขนาดย่อโดยใช้ CSS3

นักพัฒนาวางตำแหน่งงานของเขาเป็นตัวอย่างของแกลเลอรีรูปภาพพร้อมเอฟเฟกต์การเปลี่ยนแปลงเมื่อมีคำอธิบายประกอบ (คำบรรยาย) ปรากฏบนภาพขนาดย่อ ประกาศสนับสนุนอย่างมั่นใจ เบราว์เซอร์ที่ทันสมัยรวมถึง IE 9+ แน่นอนว่าเป็นการยากที่จะเรียกมันว่าแกลเลอรีเต็มรูปแบบ แต่เอฟเฟกต์ของลายเซ็นต์นั้นค่อนข้างน่าสนใจ

กฎ CSS อีกชุดหนึ่งเพื่อสร้างเอฟเฟกต์การเปลี่ยนแปลงที่น่าประทับใจเมื่อวางเมาส์เหนือภาพขนาดย่อที่กลมพอดี แพคเกจประกอบด้วยการเปลี่ยน CSS3 7 ประเภท เอกสารรายละเอียดเกี่ยวกับการกำหนดค่าและการใช้งาน เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับเอฟเฟกต์นี้

หมุนภาพขนาดย่อเมื่อโฮเวอร์

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

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

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

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

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

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

เอฟเฟกต์โฮเวอร์อีก 10 ชุดสำหรับรูปภาพ การปรับเปลี่ยนภาพขนาดย่อต่างๆ เมื่อโฮเวอร์ การขยาย การหมุน การหมุน การหรี่แสง ฯลฯ

เอฟเฟ็กต์ภาพเคลื่อนไหวชายแดน

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

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

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

ภาพเลื่อน

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

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

วิธีแก้ปัญหาที่น่าสนใจ: ภาพขนาดย่อจะแสดงในรูปแบบที่มืด เมื่อคุณวางเมาส์เหนือภาพเหล่านั้น รูปภาพจะปรากฏขึ้นและลายเซ็นจะปรากฏขึ้นบนพื้นหลังสีอ่อน

คำบรรยายภาพจะปรากฏจากมุมและขยายในแนวทแยงจนครอบคลุมพื้นที่ทั้งหมดของภาพ

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

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

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

เอฟเฟกต์อันน่าทึ่งของการวางไอคอนซ้อนทับบนภาพขนาดย่อในรูปแบบต่างๆ ตัวอย่างนี้ใช้สัญลักษณ์ (+) ที่แสดงเป็นวงกลมโดยใช้รัศมีเส้นขอบ: ใน CSS คุณยังสามารถใช้แบบอักษรของไอคอนเพื่อทำให้แผงป๊อปอัปมีข้อมูลมากขึ้น

6 คำบรรยายภาพ

6 ตัวเลือกสำหรับการปรากฏตัวของคำอธิบายภาพป๊อปอัปเมื่อโฮเวอร์โดยใช้ CSS3 บทเรียนโดยละเอียดในการใช้งานและการกำหนดค่า มีแหล่งข้อมูลให้ดาวน์โหลด

วิธีสร้างเอฟเฟกต์โฮเวอร์คำบรรยายที่ละเอียดอ่อนและทันสมัย

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

ทิศทางที่ทราบเอฟเฟกต์ CSS3 Hover ด้วย jQuery

สร้างเอฟเฟกต์โฮเวอร์แบบรับรู้ทิศทางโดยใช้ CSS3 และ jQuery

เรียนรู้วิธีสร้างเอฟเฟกต์โฮเวอร์ที่รับรู้ทิศทางโดยใช้ความดีของ CSS3 และ jQuery แนวคิดคือการมีสไลด์ซ้อนทับเล็กน้อยที่ด้านบนของภาพขนาดย่อบางส่วนจากทิศทางที่เรามาจากด้วยเมาส์

เอฟเฟกต์ Circle Hover พร้อมการเปลี่ยน CSS

บทช่วยสอนเกี่ยวกับวิธีสร้างเอฟเฟกต์โฮเวอร์ต่างๆ บนวงกลมด้วยการเปลี่ยน CSS และการหมุน 3 มิติ

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

เอฟเฟกต์โฮเวอร์ไอคอน

ชุดเอฟเฟกต์โฮเวอร์ไอคอนทรงกลมที่เรียบง่ายพร้อมการเปลี่ยน CSS และภาพเคลื่อนไหวเพื่อเป็นแรงบันดาลใจของคุณ

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