38 การสาธิตการเคลื่อนไหวของ CSS3 Animation
นับตั้งแต่เปิดตัว CSS3 มีการโต้วาทีร้อนแรงมากหมุนรอบความเป็นไปได้และการใช้งาน อย่างไรก็ตามยังมีการทดลองที่น่าสนใจมากมายที่สร้างขึ้นด้วยมือเพื่อสำรวจศักยภาพของมัน แม้ว่าการทดลองด้วยวิธีใดก็ตามไม่ได้พิสูจน์การใช้งานของ CSS3 แต่พวกเขาแสดงให้เห็นถึงความเป็นไปได้ที่แท้จริงของ CSS3 ในระดับที่นักพัฒนารายใหญ่เชื่อว่า CSS3 เป็นอนาคต.
มันเป็นเรื่องจริงเหรอ? ตัดสินด้วยตาของคุณ ในการแสดงนี้เราจะไม่แสดงอะไรนอกจากเพียงแค่ 38 การสาธิตการเคลื่อนไหวด้วย CSS3 ที่สร้างแรงบันดาลใจ ที่ค้นพบศักยภาพที่แท้จริงของ CSS3 อย่างหมดจด นอกจากการทดลองล้วนๆคุณจะเห็นตัวอย่างที่เป็นประโยชน์ของ CSS3 ที่สามารถนำไปใช้ในการออกแบบเว็บเพื่อให้มีความหวานและเซ็กซี่ยิ่งขึ้น.
พอกล่าวให้เราสำรวจโลกมหัศจรรย์ของ CSS3!
คุณอาจสนใจ:
- คู่มือการเริ่มต้นของ CSS3
- สร้างกล่องค้นหา CSS3 ที่โยกได้
- สร้างเว็บเพจ HTML5 / CSS3
- เมนูนำทาง Breadcrumb ที่สง่างามใน CSS3
- สร้างแบบฟอร์มการติดต่อ HTML5 / CSS3 ที่ใช้ Ajax
- 35 กราฟิกที่สร้างขึ้นอย่างหมดจดด้วย CSS3
- มากกว่า…
ขอแนะนำอย่างยิ่งให้คุณดูการสาธิตเหล่านี้โดยใช้เวอร์ชั่นล่าสุดของ Safari หรือ Google Chrome เวอร์ชันนักพัฒนาซอฟต์แวร์ การสาธิตส่วนใหญ่รองรับ Firefox และ Google Chrome เวอร์ชันล่าสุด.
ภาพเคลื่อนไหว 3D Helix
คนแรกในรายการคือภาพเคลื่อนไหวที่เหลือเชื่อโดย Marcofolio.net โดยใช้การแปลง CSS3 3D ภาพเคลื่อนไหวนั้นมีลักษณะคล้ายกับเวทมนตร์ แต่จริง ๆ แล้วคุณสามารถเรียนรู้การสร้างเอฟเฟกต์ที่คล้ายกันกับบทช่วยสอนในบทความ!
ปุ่มเคลื่อนไหว
สิ่งที่ต้องดูสำหรับนักออกแบบเว็บไซต์เนื่องจากการสาธิตไม่เพียงแสดงความเป็นไปได้ของการเคลื่อนไหว CSS3 แต่ยังให้เอฟเฟกต์ปุ่มที่ยอดเยี่ยมและใช้งานได้จริงเพื่อเป็นแรงบันดาลใจ!
เมนูแอนิเมชัน
พยายามเพิ่มรสชาติเมนูภาพเคลื่อนไหวของคุณเพื่อทำให้ดูเท่ห์และสร้างสรรค์ใช่ไหม การสาธิตนี้เหมาะสำหรับคุณ.
AT-AT Walker
ตัวอย่างแอนิเมชั่นที่สร้างแรงบันดาลใจแสดงให้เห็นถึงศักยภาพของ CSS3 ในการสร้างอนิเมชั่นยูนิตด้วยส่วนของร่างกาย.
Battlefield CSS3
Battlefield CSS3 ที่มีการระเบิดและกระสุนปืนจำนวนมาก!
เรื่องใหญ่
มันเป็นอนิเมชั่นที่ราบรื่นและดีที่ทำให้ตัวอย่างนี้เป็นเรื่องใหญ่.
Can Haz Ur Cursor?
“สวัสดีฉันคือ Cursor Monster พ่อของฉันมีข้อความสำหรับคุณ: 'ได้โปรดอย่าใช้ เคอร์เซอร์: ไม่มี, ยกเว้นถ้าคุณสร้างเคอร์เซอร์ที่กินมอนสเตอร์ '.”
CSS Dock
การทดลองที่เซ็กซี่เลียนแบบท่าของ Mac OS X และมันก็ราบรื่นดี.
CSS3 Man
ดูสิ CSS3 Man มาแล้ว! ตัวอย่างที่สมบูรณ์แบบเพื่อแสดงศักยภาพที่แท้จริงของภาพเคลื่อนไหว CSS3.
Dribbble Ball Bouncing
ด้วยการใช้เทคนิคกราฟิกเล็ก ๆ น้อย ๆ ทำให้แอนิเมชั่น CSS3 เป็นสิ่งที่น่าสนุก.
Dulla
Dulla แสดงให้เห็นว่าเทคนิคที่ใช้บ่อยที่สุดในการสร้างเกม platformer 2D ซึ่งตอนนี้เป็นไปได้ด้วย CSS3.
Frame by Frame Animation
ภาพเคลื่อนไหวแบบเฟรมต่อเฟรมด้วย CSS3? ไม่มีปัญหา!
ภาพเคลื่อนไหวกราฟ
แอนิเมชั่นที่เรียบง่าย แต่ทรงพลังสำหรับคุณที่จะแสดง / อธิบายกราฟในไซต์ของคุณเรียนรู้ที่จะสร้างมัน!
สูง
แอนิเมชั่นเพลงลึกลับที่แสดงภาพจาก Google Search แบบไดนามิกตามเวลาจริงและภาพที่แสดงจะขึ้นอยู่กับเนื้อเพลง.
โฮเวอร์เอฟเฟกต์
อนาคตของเอฟเฟกต์โฮเวอร์มาพร้อมกับ CSS3 เงาและมีแนวโน้ม.
ฉันคือโจเซฟบาร์เร็ตต์
CSS3 รวมอยู่ในไอคอนโซเชียลมีเดียของเว็บไซต์พอร์ตโฟลิโอ มันไม่เพียง แต่สนุก แต่ยังแสดงความคิดสร้างสรรค์ของนักออกแบบ.
อนันต์ซูม
แอนิเมชั่นที่ราบรื่นเป็นวิธีที่ดีในการอวดผลงานของคุณ การซูมทั้งหมดสำหรับ 26 ภาพคือ 67108864: 1.
Kinect และ CSS3
“14 รอยต่อของร่างกายถูกติดตามและแปลงเป็นภาพเคลื่อนไหว CSS สั้น ๆ โดยใช้ Xbox Kinect ข้อมูลร่างกายจะถูกนำเข้าไปในเบราว์เซอร์ที่มีการแยกวิเคราะห์และแปลงเป็นภาพเคลื่อนไหว CSS ด้วย animatable.com.”
มดลูก
ต้องการที่จะเย็นเท่าเมทริกซ์? ด้วย CSS3 คุณสามารถสร้างมันได้.
Morphing Cubes
การสาธิตการทดลองสำรวจ CSS3 โดยใช้การแปลงภาพเคลื่อนไหวและการเปลี่ยนภาพ 3 มิติ ส่วนที่น่าสนใจที่นี่คือคุณยังสามารถเลือกข้อความในองค์ประกอบแม้ว่าพวกเขาจะยังคงหมุน.
ระบบสุริยะของเรา
คุณไม่ต้องการซอฟต์แวร์แบบสแตนด์อโลนราคาแพงเพื่อช่วยนักเรียนสำรวจระบบสุริยะอีกต่อไป.
Duff Roll
“อืมมมม .... ผู้รักการดื่มเบียร์ที่ไม่มีวันจบสิ้น.”
วงกลมโปสเตอร์
ตัวอย่างที่เรียบง่ายและน่าสนใจในการแสดงวิธีใช้การแปลง CSS และภาพเคลื่อนไหวเพื่อให้ได้เอฟเฟกต์ที่น่าสนใจ.
สาธุคุณอันตราย
ใครบ้างที่สามารถต้านทานเว็บไซต์ที่มีตัวละครที่น่ารักและภาพเคลื่อนไหวที่น่าขบขัน?
Rofox
แอนิเมชั่นที่สนุกสนานและไร้รอยต่อรับซอร์สโค้ดเพื่อลองด้วยตัวคุณเอง!
ฌอนแกะ
“ดู Shaun และการแสดงตลกของเพื่อนในคลิปจาก 'An Ill Wind', 'Snowed In', 'The Big Chase' และ 'Twos Company' ผ่านการทดสอบเชิงโต้ตอบที่สร้างขึ้นด้วยวิดีโอ HTML5 ที่เร่งความเร็วด้วยฮาร์ดแวร์, CSS CSS 3D แปลงและ WebM.”
ช่องว่าง
บางทีพื้นที่เป็นขีด จำกัด สุดท้ายสำหรับ CSS3.
CaCSS อวกาศ
สร้างเอฟเฟกต์เวทย์มนตร์เช่นนี้ไม่ได้ยากมากนักกับ CSS3 เนื่องจากมีเพียงส่วนใหญ่เท่านั้น ซ้ำรัศมีลาด และ พื้นหลังขนาด ที่เกี่ยวข้อง รูปแบบที่เป็นไปได้ด้วยการปรับแต่งในปริมาณที่เหมาะสม.
การรวบรวมข้อมูลของ Star Wars
เอฟเฟกต์การเปิดของ Star Wars! เช่นเดียวกับมหากาพย์เป็น CSS3.
เว็บที่แสดงออก
เว็บที่แสดงออกไม่เพียง แต่แนะนำคุณเกี่ยวกับ CSS3 และการสนับสนุนเบราว์เซอร์การอ้างอิงและเอกสารประกอบ แต่ยังแสดงการเคลื่อนไหวของ CSS3 ที่น่าเหลือเชื่อบนหน้าเว็บ.
หัวจดหมาย
การใช้ประเภทเพื่อสร้างเงาที่ดูเหมือนใบหน้าของมนุษย์ใครจะคิดว่ามันจะเป็นไปได้ด้วย CSS3?
ผู้ชายจากฮอลลีวูด
เคยเห็นภาพเคลื่อนไหวที่น่าสนใจเหล่านั้นโดยใช้แค่ตัวอักษรล้วนๆใช่ไหม คุณก็สามารถใช้ CSS3 ได้เช่นกัน.
ท้องฟ้าจำลอง
เพียงตัวอย่างมหากาพย์การสำรวจท้องฟ้าจำลองด้วยรายละเอียด มีส่วนร่วม SVG, JavaScript, HTML5, CSS3 แบบอักษรและประเภท.
ประเภทฝนตก
“การคาดการณ์สำหรับวันนี้สมมติว่าคุณกำลังใช้เบราว์เซอร์ที่ทันสมัยมีเมฆมากและมีโอกาสอาบน้ำในจอร์เจีย 100%.”
ผลกระทบการพิมพ์
นอกจากปุ่มเมนูและเอฟเฟกต์โฮเวอร์แล้วคุณยังสามารถสร้างเอฟเฟ็กต์ตัวอักษรที่สร้างสรรค์ด้วย CSS3 jQuery มีส่วนร่วมในการสาธิตนี้เพื่อจัดสไตล์ตัวอักษรของคำ.
เดินไปกับ Andrew Hoyer
เหนือสิ่งอื่นใดคุณสามารถเรียนรู้ที่จะเดินไปกับ Andrew Hoyer ได้ในบทความ!
สงสัยว่า Webkit
การใช้การแปลง CSS3 3D ที่ยอดเยี่ยมด้วย JavaScript Matrix Library ฟังดูเป็นเรื่องทางเทคนิค แต่ผลลัพธ์นั้นยอดเยี่ยมมาก.
Zoetrope
อะไรที่คุณไม่สามารถทำได้ด้วย CSS3 เมื่อ Zoetrope สามารถทำได้?
การสะท้อน
สร้างแรงบันดาลใจ? ใช่. จริง? บางที. เทคนิคการทำอนิเมชั่นเป็นเรื่องที่น่าสนใจสำหรับนักพัฒนาและผู้สร้างแอนิเมชั่นเพราะต้องการความรู้ในระดับหนึ่งเพื่อสร้างอนิเมชั่นที่ราบรื่นมีเอกลักษณ์และมีสไตล์ ในขณะที่ CSS3 มีความเป็นไปได้ที่จะทำแอนิเมชั่น แต่ก็ไม่ได้หมายความว่ามันเป็นเครื่องมือที่เหมาะสมสำหรับการเคลื่อนไหว ฉันคิดว่าในที่สุดมันก็ยังเกี่ยวกับความชอบของคุณสำหรับฉันฉันก็โอเคกับทั้งคู่ตราบใดที่เครื่องมือนี้เหมาะสมกับความต้องการของโครงการ.
คุณคิดอย่างไรเกี่ยวกับภาพเคลื่อนไหว CSS3 เหล่านี้ ภาพเคลื่อนไหว CSS3 เหล่านี้ดีแค่การทดลองหรือไม่หรือสามารถนำไปใช้กับการออกแบบเว็บในชีวิตจริงได้หรือไม่? ตามปกติเรายินดีต้อนรับความคิดอันมีค่าของคุณในหัวข้อและแจ้งให้เราทราบชิ้นส่วนภาพเคลื่อนไหว CSS3 ที่คุณชื่นชอบเช่นกัน!
มากกว่า
แค่โชว์เคสจริงเหรอ? คุณสมควรได้รับมากขึ้น! ด้านล่างนี้คือบทเรียนและคำแนะนำของ CSS3 จาก Hongkiat สำหรับคุณมีช่วงเวลาที่ดีในการสำรวจพวกเขา!
