ภาพโฮเวอร์ CSS เอฟเฟกต์โฮเวอร์ CSS - สำหรับรูปภาพ ปุ่ม เมื่อโฮเวอร์เหนือลิงก์ บล็อก ฯลฯ

09.07.2019

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

CSS3 ได้มอบความเป็นไปได้มากมายให้กับนักออกแบบ UX (UX) และสิ่งที่ดีที่สุดคือองค์ประกอบที่เจ๋งที่สุดนั้นง่ายต่อการนำไปใช้งาน

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

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

เอฟเฟกต์ทั้งหมดเหล่านี้ (หนึ่งสี่เหลี่ยม) ถูกควบคุมโดยใช้คุณสมบัติการเปลี่ยนแปลง ดังนั้นเพื่อดูว่าเอฟเฟกต์เหล่านี้ทำงานอย่างไร เราได้สร้าง div ในหน้า HTML:

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

คุณสมบัติการเปลี่ยนแปลงมีค่าสามค่า: คุณสมบัติในการเปลี่ยนแปลง (ในกรณีของเราทั้งหมด) ความเร็วของการเปลี่ยนแปลง (ในกรณีของเรา 0.3 วินาที) และค่าที่สามที่ช่วยให้คุณเปลี่ยนวิธีคำนวณความเร่งและการชะลอตัว แต่เรา จะยังคงใช้การตั้งค่าเริ่มต้น โดยปล่อยให้ฟิลด์นี้ว่างเปล่า

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

หากคุณต้องการดำเนินการต่อด้วยตนเอง ไฟล์สาธิตนั้นเหมาะสำหรับคุณ

1. การหรี่แสง

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

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

จางลง ( ความทึบ:0.5; ) .จาง:โฮเวอร์ ( ความทึบ:1; )

(ตรวจสอบให้แน่ใจว่าคุณให้คลาส "จาง" แก่ div ของคุณเพื่อดูว่ามันทำงานอย่างไร)

2. การเปลี่ยนสี

ก่อนหน้านี้ การสร้างภาพเคลื่อนไหวการเปลี่ยนแปลงสีเป็นความพยายามที่ซับซ้อนอย่างไม่น่าเชื่อ โดยเกี่ยวข้องกับคณิตศาสตร์ในการคำนวณค่า RGB แต่ละรายการ จากนั้นจึงรวมค่าเหล่านั้นใหม่ ตอนนี้เราเพียงแค่ตั้งค่า div เป็นคลาส "สี" และตั้งค่าสีที่เราต้องการใน CSS:

สี:โฮเวอร์ ( พื้นหลัง:#53a7ea; )

3. การขยายและการหดตัว

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

ตั้งค่าคลาส div ของคุณเป็น "grow" จากนั้นเพิ่มโค้ดนี้ให้กับสไตล์บล็อกของคุณ:

เติบโต: โฮเวอร์ ( -webkit-transform: ขนาด (1.3); -ms-transform: ขนาด (1.3); แปลง: ขนาด (1.3); )

การลดขนาดองค์ประกอบนั้นง่ายพอๆ กับการทำให้มันใหญ่ขึ้น ในการเพิ่มองค์ประกอบ เราระบุค่าที่มากกว่า 1 เพื่อลดองค์ประกอบ เราระบุค่าที่น้อยกว่า 1:

ย่อ: โฮเวอร์ ( -webkit-transform: scale(0.8); -ms-transform: scale(0.8); การแปลง: ขนาด (0.8); )

4. แรงบิดขององค์ประกอบ

CSS มีการแปลงจำนวนหนึ่ง และหนึ่งในสิ่งที่ดีที่สุดคือการบิดงอขององค์ประกอบ กำหนดคลาส "rotate" ให้กับ div ของคุณและเพิ่มบรรทัดต่อไปนี้ใน CSS ของคุณ:

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

หมุน: โฮเวอร์ ( -webkit-transform: หมุนZ(-30deg); -ms-transform: หมุนZ(-30deg); การแปลง: หมุนZ(-30deg); )

5. เปลี่ยนสี่เหลี่ยมให้เป็นวงกลม

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

กำหนดคลาส "วงกลม" ให้กับ div ของคุณ และเพิ่มบรรทัดเหล่านี้ลงในสไตล์ชีตของคุณ:

วงกลม:โฮเวอร์ ( รัศมีเส้นขอบ:50%; )

6. เงา 3 มิติ

เงา 3D ได้รับการขมวดคิ้วมาประมาณหนึ่งปีแล้วเพราะมันไม่เข้ากับดีไซน์แบบเรียบๆ แน่นอนว่ามันไร้สาระ มันทำงานได้ดีอย่างน่าอัศจรรย์ ทำให้ผู้ใช้รู้สึกมีส่วนร่วมทั้งในการออกแบบแบบเรียบๆ และอินเทอร์เฟซ 3D หลอก

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

กำหนดคลาส "threed" ให้กับ div ของคุณ จากนั้นเพิ่มโค้ดต่อไปนี้ลงใน CSS ของคุณ:

Threed:โฮเวอร์ ( กล่องเงา: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: แปลX(-3px); การแปลง: แปลX(-3px); )

7. โยก

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

ในกรณีนี้ เราจะกำหนดภาพเคลื่อนไหว CSS ในรูปแบบต่างๆ ก่อน คุณจะสังเกตเห็นว่าเนื่องจากปัญหาในการใช้งาน เราจึงต้องใช้ @-webkit-keyframes เช่นเดียวกับ @keyframes (ใช่แล้ว จริงๆ แล้ว Internet Explorer ดีกว่า Chrome ในเรื่องนี้เป็นอย่างน้อย)

@-webkit-keyframes แกว่ง ( 15% ( -webkit-transform: TranslateX(5px); การแปลง: TranslateX(5px); ) 30% ( -webkit-transform: แปลX(-5px); การแปลง: แปลX(-5px); ) 50% ( -webkit-transform: TranslateX(3px); การแปลง: แปล X(3px); ) 65% ( -webkit-transform: แปล X(-3px); การแปลง: แปล X(-3px); ) 80% ( -webkit -transform: TranslateX(2px); การแปลง: แปลX(2px); 100% ( -webkit-transform: แปลX(0); การแปลง: แปลX(0); ) ) @keyframes แกว่ง ( 15% ( -webkit-transform: แปลX (5px); แปลงร่าง: แปลX(5px); ) 30% ( -webkit-transform: แปลX(-5px); แปลง: แปลX(-5px); ) 50% ( -webkit-transform: แปลX(3px); แปลX(3px); ) 65% ( -webkit-transform: แปลX(-3px); การแปลง: แปลX(-3px); ) 80% ( -webkit-transform: แปลX(2px); การแปลง: แปลX(2px); ) 100% ( -webkit-transform: TranslateX(0); การแปลง: TranslateX(0); ) )

8. การแทรกเส้นขอบ

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

กำหนดคลาส "เส้นขอบ" ให้กับเคสของคุณและเพิ่ม CSS ต่อไปนี้สำหรับสไตล์ของคุณ:

ชายแดน:โฮเวอร์ ( กล่องเงา: สิ่งที่ใส่เข้าไป 0 0 0 25px #53a7ea; )

คุณต้องการที่จะรู้, ? หรือ ? ทั้งหมดนี้และอีกมากมายบนเว็บไซต์ สมัครรับจดหมายข่าวทางอีเมลของเรา (ที่ด้านล่างของหน้า) หรือไปที่ และคุณจะเป็นคนแรกที่รู้เกี่ยวกับบทความใหม่! เข้าร่วมกับเราด้วย

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

1. นาฬิกา CSS3 พร้อม jQuery

นาฬิกานี้สร้างขึ้นโดยใช้หนึ่งในเครื่องมือ CSS3 หลัก - หมุนและเชื่อมต่อไลบรารี JQuery

2. นาฬิกาอะนาล็อก CSS

นาฬิกาอะนาล็อกสุดคลาสสิก สร้างขึ้นโดยใช้การเปลี่ยนแปลง webkit และคุณสมบัติการแปลง CSS แต่เพื่อให้เวลาสอดคล้องกับเวลาปัจจุบัน คุณต้องมี JavaScript

3. หมุนลูกบาศก์ 3 มิติ

การหมุนและการเคลื่อนที่ไปตามด้านข้างของลูกบาศก์จะดำเนินการโดยใช้ปุ่มมาตรฐาน "ขึ้น", "ลง", "ซ้าย" และ "ขวา" ตัวโมเดล 3 มิตินั้นถูกสร้างขึ้นโดยใช้ webkit-perspective, -webkit-transform และ -webkit-transition

4. ลูกบาศก์ 3 มิติแบบยืดหดได้หลายอัน

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

5.เมนูหีบเพลง

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

6. การเลื่อนพารัลแลกซ์ด้วย CSS

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

7. เมทริกซ์

ภาพยนตร์ลัทธิ "The Matrix" เป็นหนึ่งในภาพยนตร์นิยายวิทยาศาสตร์ที่ดีที่สุด ตัวอย่างนี้แสดงวิธีสร้างแอนิเมชั่นที่น่าทึ่งแบบเดียวกันโดยประมาณขึ้นมาใหม่ (หน้าจอสีดำที่มีตัวเลขต่อเนื่อง) ใน CSS3

8. ไดนามิกพาลารอยด์

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

9. การปรับขนาดภาพ

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

10. เอฟเฟกต์ JavaScript บน CSS3

เป็นทางเลือกแทน JavaScript โพสต์แนะนำเอฟเฟกต์ CSS3 เจ็ดแบบ: บล็อกต่างๆ ที่หมุน หายไป ย้ายออก ขยาย ฯลฯ

11. บันทึกเสมือน DJ Hero

โพสต์นี้จะอธิบายวิธีการสร้างเรกคอร์ดการหมุน สามารถปรับความเร็วในการหมุนได้โดยตรงบนหน้าจอ

12. ไวนิลเลื่อน

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

13. เอฟเฟกต์เมื่อวางเมาส์เหนือรูปภาพ

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

14. สามเหลี่ยมหมุนได้

เมื่อคุณคลิกที่รูปสามเหลี่ยม มันจะเริ่มหมุน

15. พื้นที่

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

16. “Las Meninas” ในรูปแบบ 3 มิติ

เอฟเฟกต์ CSS ที่น่าสนใจที่ทำให้ภาพวาดชื่อดังของ Diego Velazquez “Las Meninas” ปรากฏเป็นสามมิติ

17. CSS สำหรับ Mac OS X

ที่ด้านล่างของหน้าจอคือชุดไอคอนหลักของ Mac OS X ซึ่งจะขยายใหญ่ขึ้นเมื่อเลื่อนเมาส์ไปเหนือ เอฟเฟกต์จะเพิ่มไดนามิกให้กับไซต์

18. Modals ดรอปอิน

เอฟเฟกต์ CSS3 และคุณสมบัติ Drop-In Modals จะช่วยให้คุณสร้างการเปลี่ยนแปลงโมดอลที่รวดเร็ว เคลื่อนไหวได้ และง่ายดาย

19. วัตถุเคลื่อนไหว

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

20. นาฬิกาสี

นาฬิกาสีขึ้นอยู่กับ jQuery และ CSS3 ผลลัพธ์ที่คล้ายกันจะมีประโยชน์ในบริบทของการรอการแข่งขัน การลงคะแนนเสียง และอื่นๆ เสร็จสิ้น

21. แกลเลอรีไลท์บ็อกซ์พร้อม jQuery และ CSS3

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

22. ตัวอย่าง “ยืดหยุ่น”

ขยายตัวอย่างภาพเมื่อวางเมาส์เหนือ ดังนั้นเมื่อคุณคลิก เมนูจะเพิ่มขึ้นตามสัดส่วน

23. การ์ดไดนามิก

ตัวอย่างนี้คือชุดการ์ดแบบไดนามิกที่ใช้คุณลักษณะ HTML และ CSS3

24. เมนูเลื่อน JQuery

ตัวอย่างเมนูสไลด์เอาท์ถูกสร้างขึ้นโดยใช้การผสมผสานระหว่าง CSS3 และ JQuery เมื่อคุณวางเมาส์เหนือรูปภาพ หน้าต่างป๊อปอัปพร้อมข้อความจะปรากฏขึ้น

25. แท็บ CSS

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

26.เมนูฟิชอาย

ตัวอย่างนี้สาธิตวิธีการสร้างเมนู Fisheye โดยใช้ภาพเคลื่อนไหว CSS และ SVG เพื่อเป็นโบนัสเพิ่มเติม ระบบจะใช้ SVG สาธิตในแท็ก IMG

27. เมนูแบบเลื่อนลง

ประเภทนี้ให้การนำทางที่สะดวกมากผ่านเมนูหลัก ด้วยการใช้การเปลี่ยน CSS3

28. เครดิตสตาร์ วอร์ส

เครดิตที่มีชื่อเสียงจาก Star Wars HTML และ CSS ก็เพียงพอแล้วที่จะเรียกใช้

29. เอฟเฟกต์ Fisheye เพิ่มเติมใน CSS

อีกครั้ง ไอคอนที่เพิ่มขึ้นเมื่อโฮเวอร์เหนือ

30. แอนิเมชั่นแบบเฟรมต่อเฟรม

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

31. อิมพีเรียล AT-AT วอล์คเกอร์

อีกครั้งที่ Star Wars - วอล์คเกอร์ AT-AT ที่เคลื่อนไหวได้นี้สร้างโดยใช้ CSS3

32. หีบเพลง CSS อีกอัน

เมื่อคุณคลิกที่แถว ตารางจะขยายออก

33. เมนูสไลด์ออกง่ายๆ

40. เมนูแบบเลื่อนลง
อีกทางเลือกหนึ่งสำหรับเมนูแบบเลื่อนลงที่เรียบง่ายและสวยงามโดยใช้ CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ภาพเลื่อน

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

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

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

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

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

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

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

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

ตัวอย่างการสร้างเอฟเฟกต์สไลด์ภาพสำหรับแสดงคำบรรยาย 3 มิติสำหรับรูปภาพโดยใช้ CSS3 และ HTML5 เท่านั้น

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

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

และสุดท้ายแล้ว ฉันก็อดไม่ได้ที่จะพูดถึงวิธีที่ง่ายที่สุดในการสร้างคำบรรยายป๊อปอัปสำหรับภาพขนาดย่อโดยใช้ CSS3

ฉันพูดถึงวิธีนี้ในบทเรียนก่อนหน้าบทหนึ่ง:

ด้วยความเคารพ แอนดรูว์

1. นาฬิกา CSS3 พร้อม jQuery

2. นาฬิกาอะนาล็อก CSS

3. หมุนลูกบาศก์ 3 มิติ

4. ลูกบาศก์ 3 มิติแบบยืดหดได้หลายอัน

5.เมนูหีบเพลง

6. การเลื่อนพารัลแลกซ์ด้วย CSS

7. เมทริกซ์

8. ไดนามิกพาลารอยด์

9. การปรับขนาดภาพ

10. เอฟเฟกต์ JavaScript บน CSS3

11. บันทึกเสมือน DJ Hero

12. ไวนิลเลื่อน

13. เอฟเฟกต์เมื่อวางเมาส์เหนือรูปภาพ

14. สามเหลี่ยมหมุนได้

เมื่อคุณคลิกที่รูปสามเหลี่ยม มันจะเริ่มหมุน

15. พื้นที่

16. “Las Meninas” ในรูปแบบ 3 มิติ

17. CSS สำหรับ Mac OS X

18. Modals ดรอปอิน

19. วัตถุเคลื่อนไหว

20. นาฬิกาสี

21. แกลเลอรีไลท์บ็อกซ์พร้อม jQuery และ CSS3

22. ตัวอย่าง “ยืดหยุ่น”

23. การ์ดไดนามิก

ตัวอย่างนี้คือชุดการ์ดแบบไดนามิกที่ใช้คุณลักษณะ HTML และ CSS3

24. เมนูเลื่อน JQuery

25. แท็บ CSS

26.เมนูฟิชอาย

27. เมนูแบบเลื่อนลง

ประเภทนี้ให้การนำทางที่สะดวกมากผ่านเมนูหลัก ด้วยการใช้การเปลี่ยน CSS3

28. เครดิตสตาร์ วอร์ส

เครดิตที่มีชื่อเสียงจาก Star Wars HTML และ CSS ก็เพียงพอแล้วที่จะเรียกใช้

29. เอฟเฟกต์ Fisheye เพิ่มเติมใน CSS

อีกครั้ง ไอคอนที่เพิ่มขึ้นเมื่อโฮเวอร์เหนือ

30. แอนิเมชั่นแบบเฟรมต่อเฟรม

31. อิมพีเรียล AT-AT วอล์คเกอร์

อีกครั้งที่ Star Wars - วอล์คเกอร์ AT-AT ที่เคลื่อนไหวได้นี้สร้างโดยใช้ CSS3

32. หีบเพลง CSS อีกอัน

เมื่อคุณคลิกที่แถว ตารางจะขยายออก

33. เมนูสไลด์ออกง่ายๆ

| 18.02.2016

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

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

สำหรับข้อมูลโดยละเอียดเพิ่มเติม คุณสามารถดาวน์โหลดไฟล์เก็บถาวรพร้อมไฟล์ได้

เอฟเฟกต์ทั้งหมดทำงานโดยใช้คุณสมบัติการเปลี่ยนแปลง การเปลี่ยนแปลง- “transition”, “transformation”) และ pseudo-class:hover ซึ่งกำหนดสไตล์ขององค์ประกอบเมื่อเคอร์เซอร์ของเมาส์เลื่อนไปเหนือองค์ประกอบนั้น (ในบทช่วยสอนของเรา) สำหรับตัวอย่างของเรา เราใช้ div ขนาด 500x309 พิกเซล สีพื้นหลังเริ่มต้น #6d6d6d และระยะเวลาการเปลี่ยนภาพ 0.3 วินาที

เนื้อความ > div ( ความกว้าง: 500px; ความสูง: 309px; พื้นหลัง: #6d6d6d; -webkit-transition: การผ่อนผันทั้งหมด 0.3 วินาที;; -moz-transition: การผ่อนผันทั้งหมด 0.3 วินาที;; -o-transition: การผ่อนผันทั้งหมด 0.3 วินาที;; การเปลี่ยนแปลง: ความง่ายดายทั้งหมด 0.3 วินาที)

1. เปลี่ยนสีเมื่อโฮเวอร์

กาลครั้งหนึ่ง การใช้เอฟเฟกต์ดังกล่าวเป็นงานที่ต้องใช้ความอุตสาหะค่อนข้างมาก ด้วยการคำนวณทางคณิตศาสตร์ของค่า RGB บางอย่าง ตอนนี้ก็เพียงพอแล้วที่จะเขียนสไตล์ CSS โดยที่คุณต้องเพิ่ม pseudo-class:hover ให้กับตัวเลือกและตั้งค่าสีพื้นหลังที่จะเปลี่ยนสีพื้นหลังเดิมได้อย่างราบรื่น (ใน 0.3 วินาที) เมื่อคุณวางเมาส์เหนือบล็อก:

สี:โฮเวอร์ ( พื้นหลัง:#53ea93; )

2. ลักษณะของเฟรม

การเปลี่ยนแปลงที่น่าสนใจและโดดเด่นคือกรอบด้านในที่ปรากฏขึ้นอย่างนุ่มนวลเมื่อคุณเลื่อนเมาส์ เหมาะสำหรับตกแต่งกระดุมต่างๆ เพื่อให้บรรลุผลนี้ เราใช้ pseudo-class:hover และคุณสมบัติ box-shadow พร้อมด้วยพารามิเตอร์ inset (ตั้งค่าเงาภายในองค์ประกอบ) นอกจากนี้ คุณจะต้องตั้งค่าการยืดเงา (ในกรณีของเราคือ 23px) และสี:

เส้นขอบ: โฮเวอร์ ( กล่องเงา: สิ่งที่ใส่เข้าไป 0 0 0 23px #53ea93; )

3. สวิง

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

@keyframes เป็นคำสั่งพื้นฐานสำหรับการสร้างภาพเคลื่อนไหว CSS แบบเฟรมต่อเฟรม ซึ่งช่วยให้คุณทำสิ่งที่เรียกว่าได้ กระดานเรื่องราวและอธิบายแอนิเมชั่นเป็นรายการประเด็นสำคัญ
ภาพเคลื่อนไหวและจำนวนการวนซ้ำของภาพเคลื่อนไหว - คุณสมบัติสำหรับการตั้งค่าพารามิเตอร์ภาพเคลื่อนไหว (ระยะเวลาและความเร็ว) และจำนวนรอบ (การทำซ้ำ) ในกรณีของเรา ให้ทำซ้ำ 1

@-webkit-keyframes แกว่ง ( 15% ( -webkit-transform: TranslateX(9px); แปลง: TranslateX(9px); ) 30% ( -webkit-transform: TranslateX(-9px); แปลงร่าง: TranslateX(-9px); ) 40% ( -webkit-transform: TranslateX(6px); การแปลง: TranslateX(6px); ) 50% ( -webkit-transform: TranslateX(-6px); การแปลง: TranslateX(-6px); ) 65% ( -webkit -transform: TranslateX(3px); การแปลง: แปลX(3px) 100% ( -webkit-transform: แปลX(0); การแปลง: แปลX(0); ) ) @keyframes แกว่ง ( 15% ( -webkit-transform: แปลX( 9px); แปลงร่าง: แปลX(9px); ) 30% ( -webkit-transform: แปลX(-9px); แปลง: แปลX(-9px); ) 40% ( -webkit-transform: แปลX(6px); แปลงร่าง: แปลX (6px); ) 50% ( -webkit-transform: TranslateX(-6px); การแปลง: แปลX(-6px); ) 65% ( -webkit-transform: แปลX(3px); การแปลง: แปลX(3px); ) 100 % ( -webkit-transform: TranslateX(0); แปลง: TranslateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s ง่าย; ภาพเคลื่อนไหว: แกว่ง 0.6s ง่าย; -webkit-animation-iteration-count: 1; ภาพเคลื่อนไหวซ้ำนับ: 1; -

4. การลดทอน

เอฟเฟกต์การเฟดคือการเปลี่ยนแปลงความโปร่งใสขององค์ประกอบอย่างง่ายๆ แอนิเมชั่นถูกสร้างขึ้นในสองขั้นตอน: ขั้นแรกคุณต้องตั้งค่าสถานะความโปร่งใสเริ่มต้นเป็น 1 - นั่นคือความทึบสมบูรณ์ จากนั้นระบุค่าเมื่อวางเมาส์ - 0.6:

จางลง ( ความทึบ: 1; ) .เฟด:โฮเวอร์ ( ความทึบ: 0.6; )

สำหรับผลลัพธ์ที่ตรงกันข้าม ให้สลับค่า:

5. การขยายภาพ

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

เติบโต: โฮเวอร์ ( -webkit-transform: ขนาด (1.2); -ms-transform: ขนาด (1.2); แปลง: ขนาด (1.2); )

6. การลดลง

การทำให้องค์ประกอบมีขนาดเล็กลงนั้นง่ายพอๆ กับการทำให้มันใหญ่ขึ้น หากในจุดที่ห้าเพื่อเพิ่มมาตราส่วน เราจำเป็นต้องระบุค่าที่มากกว่า 1 ดังนั้นเพื่อลดบล็อก เราจะระบุค่าที่จะน้อยกว่าหนึ่ง ตัวอย่างเช่น scale(0.7) ตอนนี้ เมื่อวางเมาส์ไว้ บล็อกจะหดตัวตามสัดส่วน 30 เปอร์เซ็นต์ของขนาดเดิม:

ย่อ: โฮเวอร์ ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); การแปลง: ขนาด (0.7); )

7. การแปลงร่างเป็นวงกลม

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

วงกลม:โฮเวอร์ ( รัศมีเส้นขอบ: 70%; )

8. การหมุน

ตัวเลือกแอนิเมชันสนุกๆ คือการหมุนองค์ประกอบตามจำนวนองศาที่กำหนด ในการดำเนินการนี้ เราจะต้องมีคุณสมบัติการแปลงอีกครั้ง แต่มีค่าที่แตกต่างกัน - RottoZ(20deg) ด้วยพารามิเตอร์เหล่านี้ บล็อกจะหมุนตามเข็มนาฬิกา 20 องศาสัมพันธ์กับแกน Z:

หมุน: โฮเวอร์ ( -webkit-transform: หมุนZ(20deg); -ms-transform: หมุนZ(20deg); การแปลง: หมุนZ(20deg); )

9. เงา 3 มิติ

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

Threed:โฮเวอร์ ( กล่องเงา: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: TranslateX( -7px); แปลง: แปลX(-7px)

รองรับเบราว์เซอร์

เบราว์เซอร์ต่อไปนี้รองรับคุณสมบัติการเปลี่ยนแปลงในปัจจุบัน:

เบราว์เซอร์เดสก์ท็อป
อินเทอร์เน็ตเอ็กซ์พลอเรอร์	รองรับ IE 10 ขึ้นไป
โครเมียม	รองรับตั้งแต่เวอร์ชัน 26 (จนถึงเวอร์ชัน 25 ใช้งานได้กับคำนำหน้า -webkit-)
ไฟร์ฟอกซ์	รองรับตั้งแต่เวอร์ชัน 16 (ในเวอร์ชัน 4-15 ใช้งานได้กับคำนำหน้า -moz-)
โอเปร่า	รองรับตั้งแต่เวอร์ชัน 12.1
ซาฟารี	รองรับตั้งแต่เวอร์ชัน 6.1 (ในเวอร์ชัน 3.1-6 ใช้งานได้กับคำนำหน้า -webkit-)

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

เราหวังว่าคุณจะพบว่าตัวอย่างภาพเคลื่อนไหว CSS3 เหล่านี้มีประโยชน์ เราหวังว่าคุณจะประสบความสำเร็จอย่างสร้างสรรค์!