20+ แพ็ค SVG เคลื่อนไหวสุดเจ๋ง

เผยแพร่แล้ว: 2015-11-16

SVG (หรือ Scalable Vector Graphics) เป็นรูปแบบไฟล์ XML ซึ่งประกอบด้วยเวกเตอร์สองมิติและช่วยให้นักพัฒนาสามารถสร้างกราฟิกและแอปพลิเคชันกราฟิกที่น่าทึ่งซึ่งเป็นไดนามิกและเคลื่อนไหวได้

สารบัญ ซ่อน
SVG POP Watch – SVG Watch Engine ที่ตอบสนองฉับไว
ชุดภาพประกอบ SVG แบบเคลื่อนไหว
รูปแบบข้อความ 3 มิติแบบเคลื่อนไหว – SVG
ไอคอนสภาพอากาศ SVG เคลื่อนไหว
ไอคอน SEO SVG 6 แพ็ค
StarshineJS – เอฟเฟกต์ HTML ของดาวประกายระยิบระยับ SVG
ไอคอนเบราว์เซอร์ SVG แบบเคลื่อนไหว
เติมชีวิตชีวาให้กับ Premium Add-on: Web Promotional Icons
Trigons – สร้างและทำให้ภาพ SVG นามธรรมเคลื่อนไหว
Cyclo – SVG Loaders Kit
ตัวโหลดล่วงหน้า HTML5 แบบวงกลม
แอนิเมชั่นนักดนตรีที่ตอบสนอง
แพ็คไอคอน SVG ไอคอนเคลื่อนไหว
รถตักพับ เคลื่อนไหว SVG
Flatimation SVG – ชุดไอคอน SVG แบบเคลื่อนไหว
สไลด์โชว์ภาพถ่ายกล้อง Retro SVG
16 ไอคอน SEO แบบเคลื่อนไหว
เมนู Gooey: ปลั๊กอิน jQuery
40 ไอคอนโซเชียลมีเดีย SVG แบบเคลื่อนไหว
ลูกโลก SVG แบบเคลื่อนไหวพร้อมเครื่องหมายและโลโก้
เครื่องเล่นเสียง Gear HTML5
แผนภูมิวงกลม 3 มิติพร้อม JavaScript
ตัวอย่างเว็บไซต์ที่ยอดเยี่ยมที่ใช้พลังของ SVG
นักรบ: ผู้พิชิตความเป็นเลิศ
เข็มหมุด
Poignee de main virile
เข็มหมุด
iFly50
The ARK: Star Citizen Starmap
ทำให้แผ่นดินไหวแปลก
30u
กลุ่ม QED
Melanie Daveid
WWF ฝรั่งเศส – Earth Hour Paris
Nerisson
บริษัทออกแบบเดียว
มิโดริ อาโอยามะ

SVG เป็นรูปแบบรูปภาพที่ทรงพลังที่สามารถจัดการกับโค้ด ทั้งในโปรแกรมแก้ไขข้อความหรือด้วย CSS / JS และมีการใช้มากขึ้นเรื่อยๆ ในการออกแบบเว็บ

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

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

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

ป.ล. เราได้เพิ่มตัวอย่าง วิธีการใช้ SVG ในการออกแบบเว็บ ด้านล่าง

SVG POP Watch – SVG Watch Engine ที่ตอบสนองฉับไว

เข็มหมุด

SVG POP Watch นั้นสมบูรณ์แบบสำหรับโครงการหรือทีมเว็บไซต์ของคุณ คุณสามารถเปลี่ยนรูปลักษณ์ได้อย่างง่ายดาย มีกลไกนาฬิกา SVG แบบเคลื่อนไหวพร้อมเรตินาและตอบสนอง คุณสามารถเพิ่มการออกแบบของคุณเองได้อย่างง่ายดาย นาฬิกา SVG นี้มาพร้อมกับคุณสมบัติที่ยอดเยี่ยมมากมาย ดังนั้นอย่าลืมลองดู!

ชุดภาพประกอบ SVG แบบเคลื่อนไหว

ชุดภาพประกอบ SVG แบบเคลื่อนไหว เข็มหมุด

นี่เป็นชุดภาพประกอบ SVG ที่ดีและมีชีวิตชีวาจริงๆ พวกเขาสร้างขึ้นโดยใช้ไลบรารี Snap.SVG JavaScript และจะดูดีในโครงการของคุณ

รูปแบบข้อความ 3 มิติแบบเคลื่อนไหว – SVG

รูปแบบข้อความ 3 มิติแบบเคลื่อนไหว - ตัวอย่าง SVG - CodeCanyon เข็มหมุด

ชุดนี้ประกอบด้วยข้อความแอนิเมชั่น 3 มิติ 10 แบบที่ไม่เหมือนใคร พวกเขาใช้ข้อความ HTML ซึ่งหมายความว่า Google อ่านเหมือนกับข้อความ HTML อื่นๆ สไตล์ในชุดนี้มีตั้งแต่แบบสมจริง แบนราบ และมีมิติเท่ากัน

ไอคอนสภาพอากาศ SVG เคลื่อนไหว

ไอคอนสภาพอากาศ SVG เคลื่อนไหว เข็มหมุด

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

ไอคอน SEO SVG 6 แพ็ค

ไอคอน SVG เคลื่อนไหว SVG Packs เข็มหมุด

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

StarshineJS – เอฟเฟกต์ HTML ของดาวประกายระยิบระยับ SVG

แพ็ค SVG เคลื่อนไหวของ StarshineJS เข็มหมุด

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

ไอคอนเบราว์เซอร์ SVG แบบเคลื่อนไหว

ไอคอน SVG แบบเคลื่อนไหว เข็มหมุด

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

เติมชีวิตชีวาให้กับ Premium Add-on: Web Promotional Icons

ไอคอนแพ็ค SVG เคลื่อนไหว เข็มหมุด

ชุดนี้ประกอบด้วยไอคอนโปรโมตเว็บ 50 รายการ นี่เป็นส่วนเสริมสำหรับ Enliven'em แต่ละไอคอนมาพร้อมกับรูปแบบพื้นหลัง 5 แบบ ซึ่งหมายความว่าคุณจะได้รับไฟล์ SVG ทั้งหมด 250 ไฟล์

Trigons – สร้างและทำให้ภาพ SVG นามธรรมเคลื่อนไหว

Trigons Animated SVG Packs เข็มหมุด

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

Cyclo – SVG Loaders Kit

Cyclo - SVG Loaders Kit เข็มหมุด
ด้วยชุดนี้ พรีโหลดของคุณจะดูดี! นี่คือเอฟเฟกต์แอนิเมชั่นการโหลด 33 รายการที่สร้างขึ้นใน SVG เท่านั้น

ตัวโหลดล่วงหน้า HTML5 แบบวงกลม

ตัวโหลดล่วงหน้า HTML5 แบบวงกลม เข็มหมุด

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

แอนิเมชั่นนักดนตรีที่ตอบสนอง

แอนิเมชั่น SVG เคลื่อนไหวของนักดนตรีที่ตอบสนอง เข็มหมุด

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

แพ็คไอคอน SVG ไอคอนเคลื่อนไหว

เข็มหมุด

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

รถตักพับ เคลื่อนไหว SVG

รถตักพับ เคลื่อนไหว SVG เข็มหมุด

แอนิเมชั่น Folding Loader SVG นั้นสมบูรณ์แบบสำหรับหน้าตัวโหลดล่วงหน้าของคุณ ใช้อย่างมั่นใจ!

Flatimation SVG – ชุดไอคอน SVG แบบเคลื่อนไหว

แพ็ค SVG เคลื่อนไหวแบบเคลื่อนไหว เข็มหมุด

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

สไลด์โชว์ภาพถ่ายกล้อง Retro SVG

ชุด SVG แบบเคลื่อนไหวย้อนยุค เข็มหมุด

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

16 ไอคอน SEO แบบเคลื่อนไหว

ไอคอนแพ็ค SVG เคลื่อนไหว เข็มหมุด

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

เมนู Gooey: ปลั๊กอิน jQuery

เมนู Gooey ปลั๊กอิน jQuery เข็มหมุด

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

40 ไอคอนโซเชียลมีเดีย SVG แบบเคลื่อนไหว

ภาพเคลื่อนไหว SVG Packs ไอคอนโซเชียลมีเดีย เข็มหมุด

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

ลูกโลก SVG แบบเคลื่อนไหวพร้อมเครื่องหมายและโลโก้

โลโก้ SVG แบบเคลื่อนไหว เข็มหมุด

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

เครื่องเล่นเสียง Gear HTML5

ชุด SVG แบบเคลื่อนไหวของเกียร์ เข็มหมุด

ตอนนี้คุณสามารถแสดงเพลงของคุณอย่างสร้างสรรค์ได้อย่างง่ายดาย Gear Player นี้มีอินเทอร์เฟซผู้ใช้ที่น่าดึงดูดซึ่งคุณจะต้องชอบอย่างแน่นอน

แผนภูมิวงกลม 3 มิติพร้อม JavaScript

แผนภูมิวงกลม 3 มิติพร้อม JavaScript เข็มหมุด

แผนภูมิวงกลม 3 มิตินี้พัฒนาขึ้นในทางเลือก JavaScript, SVG และ VML คุณสามารถปรับแต่ง เปลี่ยนตำแหน่ง ความสูง รัศมี คุณลักษณะคำอธิบาย ขนาดข้อความ และอื่นๆ อีกมากมายได้อย่างง่ายดาย

ตัวอย่างเว็บไซต์ที่ยอดเยี่ยมที่ใช้พลังของ SVG

นักรบ: ผู้พิชิตความเป็นเลิศ

เว็บไซต์ Cavalier svg เข็มหมุด

ชุดเกมเหล่านี้สร้างขึ้นโดยใช้ SVG สำหรับแอนิเมชั่นและกราฟิก Posture & Balance เป็นเกมแรกที่สร้างขึ้นสำหรับแพลตฟอร์มที่เรียกว่า Cavalier ซึ่งได้รับการออกแบบด้วยเทคโนโลยีที่เป็นนวัตกรรมใหม่

Poignee de main virile

เว็บไซต์ Poignee svg เข็มหมุด

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

iFly50

เว็บไซต์ iFly50 svg เข็มหมุด

เมื่อนิตยสาร FLY KLM เฉลิมฉลองฉบับที่ห้าสิบ นิตยสารดังกล่าวได้ออกแบบเว็บไซต์แอนิเมชั่นสีสันสดใสสำหรับคอลเลกชั่นการเดินทางขั้นสุดยอด ด้วยวิธีนี้จึงมีการนำเสนอ 50 สถานที่ที่สวยงามและน่าสนใจที่สุดในโลก

The ARK: Star Citizen Starmap

เว็บไซต์ svgStarmap เข็มหมุด

เว็บไซต์นี้ใช้อินเทอร์เฟซ ARK ที่น่าทึ่งนำเสนอ Robert's Space Industries ผู้ผลิตยานอวกาศภายในเกม "Star Citizen" นี่คือพอร์ทัลสำหรับข้อมูล อัปเดต และซื้อยานอวกาศของคุณเอง ซึ่งคุณสามารถปกป้องพลเมืองของ Star Citizen

ทำให้แผ่นดินไหวแปลก

เก็บเว็บไซต์แผ่นดินไหวที่ใช้svg เข็มหมุด

Keep Earthquakes Weird เป็นแพลตฟอร์มที่สร้างขึ้นด้วยเอฟเฟกต์กราฟิก SVG ที่น่าทึ่ง ซึ่งสร้างขึ้นโดยมีเป้าหมายเพื่อเตรียมประชากรในพอร์ตแลนด์ในกรณีที่เกิดแผ่นดินไหว เนื้อหาให้ความรู้ดีมาก

30u

เว็บไซต์ 30u svg เข็มหมุด

30u คือ e-shop ที่ขายรองเท้าบนเว็บไซต์ที่สร้างโดยนักพัฒนาที่ให้ความสำคัญกับสไตล์และใช้คุณสมบัติ SVG ที่น่าสนใจ

กลุ่ม QED

เว็บไซต์ QED-Group svg เข็มหมุด

ไซต์ QED GROUP มีภาพประกอบที่มีการชี้นำที่น่าทึ่ง ซึ่งจะมอบประสบการณ์การนำทางที่ยอดเยี่ยมแก่คุณ เลย์เอาต์ของเว็บไซต์มีระดับและชาญฉลาด

Melanie Daveid

เว็บไซต์ Melanie Daveid svg เข็มหมุด

เว็บไซต์ของ Melanie Daveid เป็นหนึ่งในเว็บไซต์ผลงานที่อร่อยที่สุดที่สามารถพบได้บนเว็บ เว็บไซต์มีการเปลี่ยนภาพที่ราบรื่นและภาพประกอบมือที่งดงาม

WWF ฝรั่งเศส – Earth Hour Paris

เว็บไซต์ WWF France svg เข็มหมุด

ไซต์แอนิเมชั่นนี้สร้างขึ้นสำหรับ WWF ประเทศฝรั่งเศส และใช้เพื่อประกาศว่าในวันที่ 19 มีนาคม หอไอเฟลจะปิดไฟสำหรับ Earth Hour

Nerisson

เว็บไซต์ Nerisson svg เข็มหมุด

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

บริษัทออกแบบเดียว

เว็บไซต์ One Design svg เข็มหมุด

One Design Company เป็นทีมนักออกแบบ นักพัฒนา ผู้จัดการโครงการ นักเขียนและศิลปินมากประสบการณ์ ไซต์ของพวกเขามีความสดใสและโต้ตอบได้โดยใช้ภาพ SVG ที่คมชัด

มิโดริ อาโอยามะ

เว็บไซต์ MIDORI AOYAMA svg เข็มหมุด

Midori Aoyama เป็นดีเจและโปรดิวเซอร์ในโตเกียว เขาได้เปิดตัวปาร์ตี้ของตัวเอง “EUREKA!” ที่ยังคงเป็นหนึ่งในปาร์ตี้ดนตรีที่ดีที่สุดในญี่ปุ่น ไซต์ของเขายังเป็นนวัตกรรมอีกด้วย เป็นตัวอย่างที่น่าสนใจของ SVG และวิธีที่คุณจะได้รับประโยชน์จากไซต์นี้ในฐานะผู้ใช้