30 ภาพเคลื่อนไหว CSS ที่ยอดเยี่ยมที่คุณต้องดู

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

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

ภาพเคลื่อนไหวการโหลด CSS โดย patrikhjelm

จุดเคลื่อนไหวเจ็ดจุดเลื่อนไปทางซ้ายและขวาเพื่อแสดงถึงการกระทำที่กำลังโหลด.

ไอคอนรถเข็นเคลื่อนไหวโดย jonitrythall

เอฟเฟ็กต์ภาพเคลื่อนไหวที่น่ารักสำหรับเมื่อมีการเพิ่มของชำในตะกร้าสินค้า เลื่อนลงเพื่อเพิ่มเติม.

Hamburger CSS3 แอนิเมชันเท่านั้นโดย Dawid Krajewski

สร้างด้วย CSS ล้วนๆไม่มี JS หรืออย่างอื่น.

ตัวละครเคลื่อนไหว 404 โดย With An Es

อย่างน้อยกับหน้าข้อผิดพลาดนี้นักพัฒนาก็กำลังทำงานอยู่ แม้ว่ามันจะเป็น 404.

CSS Mars Landing โดย mgitch

เราลงจอดบนดาวอังคารแล้ว! ทำด้วย CSS.

The Avenger โดย mariosmaselli

คุณสามารถได้ยินความโกรธของซากเรือที่สั่นคลอนผ่านหน้าจอไหม? เจ๋งใช่มั้ย?

สลับกลางวัน / กลางคืนโดย jsndks

ตอนนี้คุณสามารถสลับได้ทั้งวันทั้งคืนด้วย CSS ความคิดอัจฉริยะ!

แอปของ Google Now บุคคลที่สามโดย codecalm

แอปของบุคคลที่สามของ Google Now เคลื่อนไหว.

Clo clo โดย judag

ไก่เคลื่อนไหวอย่างนั้นหรือไม่? คุณเดิมพันได้หรือไม่พร้อมกับคอ jiggy สุดยอดการฝึกฝน CSS3.

ไอคอนเมนูแอนิเมชันโดย mariusbalaj

ความคิดง่ายๆที่นำไปสู่การปฏิบัติ ดูปุ่มเมนูเป็นรูปเป็นร่างเมื่อคุณเลื่อนลง.

Preloader CSS อื่นโดย Maseone

แอนิเมชั่นโหลด CSS จังหวะที่ยอดเยี่ยม ถูกสะกดจิตใช่ไหม?

ปุ่มส่งโดย auginator

คลิกเพื่อส่งและปุ่มจะเคลื่อนไหวกระบวนการโหลดจนกว่าการส่งจะเสร็จสมบูรณ์!

แถบยางยืด SVG ออกแบบแถบด้านข้างโดย suez

ลากแถบสีขาวไปทางขวาเพื่อดูเอฟเฟกต์แถบด้านยืดหยุ่น.

ปุ่มอนุภาคโดย igcorreia

ทำในสิ่งที่ปุ่มพูดว่า: โฮเวอร์สำหรับสุดยอด.

ปุ่ม Gooey โดย Lucas Bebber

คลิกเพื่อเอฟเฟกต์เหนอะหนะ คุณจะได้รับเมื่อคุณเห็นมันและคุณจะคลิกอีกสองสามครั้ง amirite?

ปุ่ม Flipside โดย hakimel

คลิกที่ด้านใดด้านหนึ่งของปุ่มลบและปุ่มจะพลิกตามที่คุณคลิก.

เมนูแฮมเบอร์เกอร์จริง! โดย CharlesSmart

เมนูแฮมเบอร์เกอร์แสนอร่อยอย่างแท้จริง คลิกที่แฮมเบอร์เกอร์เพื่อผล

Cruisin 'โดย yy

ดูมอเตอร์ไซค์ไป.

3D cube wave โดย waddington

Holy 3D Cube-sicles!

ภาพเคลื่อนไหวลายเซ็นโดย drygiel

นี่คือลายเซ็นต์ที่ไม่ใช่ภาพเคลื่อนไหว GIF จริงๆ แต่เป็นลำดับ PNG ที่เคลื่อนไหวด้วย CSS3 แทน.

ภาพเคลื่อนไหวการไล่ระดับสีพื้นหลังโดย quasimondo

เคล็ดลับนี้เปลี่ยนการไล่ระดับพื้นหลังจากสีหนึ่งไปเป็นสีอื่นในรูปแบบต่อเนื่องที่ราบรื่น.

ไอคอนสลับ Star wars โดย RSS

เมนูแฮมเบอร์เกอร์กลายเป็นกระบี่แสงในการต่อสู้ (กากบาท).

แอนิเมชันสไตล์ GIF โดย jascha

ดูในฐานะที่เป็นรูปถ่ายที่เกิดขึ้นจากศิลปะพิกเซล.

มุ่งเน้นการเคลื่อนไหวเข้า / ออกโดย fluxus

ภาพเคลื่อนไหวปากกาแบบเคลื่อนไหวขนาดเล็กเขียนบนยอดที่คุณกำลังกรอก.

รงค์สามเหลี่ยมโดย felipedefarias

ภาพลวงตาออพติคอลที่ยอดเยี่ยมทำได้ด้วย CSS3.

เครื่องชงกาแฟโดย Thisisroger

นี่คือเครื่องเตือนความจำให้คุณดื่มกาแฟทุกวัน เหมือนที่คุณต้องการ.

Chrome Dinosaur โดย nickspiel

ไม่สามารถเข้าถึงหน้าเว็บที่คุณต้องการเพราะการเชื่อมต่อที่ถูกทิ้งหรือไม่? นี่คือไดโนเสาร์ที่คุณมักจะเห็นเมื่อเกิดเหตุการณ์ขึ้นเฉพาะคราวนี้มันวิ่งออกมาจากอุกกาบาต!

CSS เขย่าโดย elrumordelaluz

โฮเวอร์เหนือเอฟเฟกต์แต่ละอย่างเพื่อดูหนุ่มน้อยตัวสั่น.

Cradle Loader ของนิวตันโดยทุกสิ่ง Smitty

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

เปิดตัว Modal By koolhaus

คลิกเพื่อดูภาพเคลื่อนไหวหน้าต่าง modal ที่ดีและราบรื่น.

หุ่นยนต์เดินโดย P233

หุ่นยนต์ตัวนี้เดินต่อไปและเดินและเดินรอบแกน Y.

Flexing Pagination Arrows โดย Hakim

จากหน้าแรกไปจนถึงหน้าสุดท้ายแอนิเมชั่นการแบ่งหน้านี้แสดงให้เห็นอย่างชัดเจนว่าคุณเป็นคนหน้าซีด.

ตอนนี้อ่าน: เอฟเฟกต์ข้อความสวยงาม 15 แบบที่สร้างขึ้นด้วย CSS