วิธีการเพิ่มแอนิเมชั่นเป็น SVG ด้วย CSS

Sep 14, 2025
วิธีการ
Image: Web Designer
[ภาพ: นักออกแบบเว็บไซต์]

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

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

ประหยัด 100 ปอนด์กับตั๋วนกสุดยอดไปจนถึง สร้าง css การประชุมผ่านเว็บหนึ่งวันที่จัดทำโดย Creative Bloq นิตยสาร Web Designer และ Net Magazine จองที่นี่ .

01. สร้างและบันทึก

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

02. ปรับให้เหมาะสมสำหรับเว็บ

SVG screenshot

คลิกที่ไอคอนที่ด้านบนขวาเพื่อขยายภาพ [ภาพ: SVGOMG]

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

03. ตั้งค่าเอกสาร HTML

เปิดตัวแก้ไขรหัสของคุณเลือกและตั้งค่าเอกสาร HTML เปล่า เราจะเขียนภาพเคลื่อนไหว CSS ในไฟล์ที่เรียกว่า main.css ดังนั้นจึงสร้างสิ่งนี้ด้วย เพื่อให้สิ่งต่าง ๆ มุ่งเน้นไปที่ภาพเคลื่อนไหวเราได้ดึงเข้าสู่ Bootstrap 4.1.3 รุ่น CSS-only เท่านั้น

04. สร้างเค้าโครง

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

05. วาง SVG

เรากำลังใช้แอนิเมชั่นของเราเพื่อให้การแนะนำที่ด้านบนของหน้าน่าสนใจยิ่งขึ้น วางรหัส SVG ที่เหมาะสมที่สุดลงในคอลัมน์ที่สองในหน้า หากใช้ Bootstrap ให้คลาส SVG img- ของเหลว เพื่อให้แน่ใจว่ามันปรับขนาดบนโทรศัพท์มือถือ

06. เพิ่มคลาสให้กับ SVG

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

 & lt; SVG & GT;
& lt; g & gt;
& lt; rect class = "rectbackground" width = "147.4107"
ความสูง = "68.7917" x = "31.2946" Y = "114.1042"
rx = "4.5882" ry = "3.9565" เติม = "# 2A7FFF" / & GT;
& lt; path class = "recttext" d = "... " เอฟเฟกต์เอฟเฟกต์ = "non-scaling-stroke" stroke-width = "470476156" font-size = "12" เติม = "# fff"
Fill-Rule = "DeVeodd" Stroke = "# FFF" Stroke-Linecap = "Round" / & GT;
& lt; / g & gt;
& lt; / svg & gt;

07. สถานะเริ่มต้น

การเลือกองค์ประกอบ SVG ของเราใน CSS นั้นเหมือนกับองค์ประกอบอื่น ๆ เราใช้คลาสของเราเพื่อเลือกองค์ประกอบเหล่านั้นภายใน SVG ทั้งสองส่วนของ SVG ของเราจะเริ่มต้นที่ซ่อนอยู่เมื่อโหลดหน้าดังนั้นลองใช้ CSS เพื่อตั้งค่าความทึบขององค์ประกอบทั้งสอง 0 . 

 path.recttext {
ความทึบ: 0;
}
rect.rectbackground {
ความทึบ: 0;

08. ประกาศภาพเคลื่อนไหว

เราจำเป็นต้องประกาศชื่อและคีย์เฟรมสำหรับภาพเคลื่อนไหวแต่ละภาพเพื่อให้ CSS รู้ว่าสิ่งที่เราต้องการจะทำเมื่อเราขอให้มันมีผล ฉันเลือก TextDraw และ การตั้งค่า ตามที่อธิบายแต่ละภาพเคลื่อนไหว การตั้งค่า จะเป็นอนิเมชั่นสองขั้นตอนที่เรียบง่าย TextDraw จะมีขั้นตอนกลางพิเศษ 

 @Keyframes TextDraw {
0% {}
50% {}
100% {}
}
@Keyframes rectfade {
จาก{}
ถึง{}

09. กำหนดภาพเคลื่อนไหวและคุณสมบัติ

SVG and coding

คลิกที่ไอคอนที่ด้านบนขวาเพื่อขยายภาพ [ภาพ: โจเซฟฟอร์ด]

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

 rect.rectbackground {
ความทึบ: 0;
แอนิเมชัน: rectfade 1s cubic-bezier (0.645,
0.045, 0.355, 1) ส่งต่อ;

10. ภาพเคลื่อนไหวสี่เหลี่ยมผืนผ้า

SVG image

คลิกที่ไอคอนที่ด้านบนขวาเพื่อขยายภาพ [ภาพ: โจเซฟฟอร์ด]

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

 @Keyframes rectfade {
จาก {
ความกว้าง: 1%;
}
ถึง {
ความกว้าง: 100%;
ความทึบแสง: 1;
}

11. อนิเมชั่นข้อความ

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

 path.recttext {
ความทึบ: 0;
แอนิเมชัน: TextDraw 4S
Cubic-Bezier (.56, -0.04, .32, .7) ไปข้างหน้า;

12. ชะลอการเริ่มต้น

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

 path.recttext {
ความทึบ: 0;
แอนิเมชัน: TextDraw 4S
Cubic-Bezier (.56, -0.04, .32, .7) ไปข้างหน้า;
อนิเมชั่นล่าช้า: 1s;

13. เลียนแบบการวาดเส้น

SVG animation

คลิกที่ไอคอนที่ด้านบนขวาเพื่อขยายภาพ [ภาพ: โจเซฟฟอร์ด]

เพื่อรับผลการวาดเส้นของเราเราจะใช้ โรคหลอดเลือดสมอง - Dasharray และ Stroke-DashOffset พารามิเตอร์ ค่าของคุณจะแตกต่างกันไปตาม SVG ที่คุณใช้ ในการค้นหาค่าของคุณใช้เครื่องมือนักพัฒนาที่คุณต้องการและเพิ่มขึ้น โรคหลอดเลือดสมอง - Dasharray จาก 0 จนกระทั่งรูปร่างทั้งหมดถูกปกคลุมด้วยหนึ่งจังหวะ 

 path.recttext {
ความทึบ: 0;
Stroke-Dasharray: 735;
แอนิเมชัน: TextDraw 4S
Cubic-Bezier (.56, -0.04, .32, .7) ไปข้างหน้า;
อนิเมชั่นล่าช้า: 1s;

14. Keyframe การวาดบรรทัดแรก

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

 0% {
เติม: RGB (255, 255, 255, 0);
Stroke: #FFF;
Stroke-DashOffset: 800;
ความทึบแสง: 1;

15. วาดเส้น

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

 40% {
Stroke-DashOffset: 0;
เติม: RGB (255, 255, 255, 0.0);

16. เติมรูปร่าง

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

 100% {
เติม: RGB (255, 255, 255, 1);
Stroke-DashOffset: 0;
ความทึบแสง: 1;

generate conference

บทความนี้ได้รับการตีพิมพ์ในนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 286 หรือ ติดตาม .

อ่านเพิ่มเติม:

  • เพิ่มตัวกรอง SVG ด้วย CSS
  • วิธีการออกแบบด้วยรูปร่าง CSS: บทนำ
  • วิธีการรหัสเอฟเฟกต์ข้อความสมาร์ทด้วย CSS

วิธีการ - บทความยอดนิยม

สไตล์ไซต์โดยใช้ Sass

วิธีการ Sep 14, 2025

คุณสามารถทำอะไรได้มากกับ CSS - บางทีมากกว่าที่ค�..

10 สิ่งที่น่าทึ่งที่คุณสามารถทำได้ด้วยเลเยอร์

วิธีการ Sep 14, 2025

เลเยอร์เป็นสิ่งที่ช่วยให้คุณสามารถสร้างโครง..

ยกระดับศิลปะ VR ของคุณ

วิธีการ Sep 14, 2025

ฉันเริ่มใช้ Cinema 4D สองสามเดือนหลังจากได้รับชุดห�..

เพิ่มอนิเมชั่น UI ในเว็บไซต์ของคุณ

วิธีการ Sep 14, 2025

คนส่วนใหญ่เห็นอินเทอร์เฟซผู้ใช้ทุกวันไม่ว่า..

สร้างฉาก Sci-Fi 3D ที่ซับซ้อนในเครื่องปั่น

วิธีการ Sep 14, 2025

การสร้างฉากเมือง Sci-Fi Apocalyptic ใน ศิลปะ 3 มิติ เป�..

วาดตัวเลขภายในห้านาที

วิธีการ Sep 14, 2025

การวาดภาพท่าทางห้านาทีเป็นเรื่องสนุกมากเพราะมีเวลาเพียงพอที่จะจ�..

วาดภาพเหมือนแวนโก๊ะ

วิธีการ Sep 14, 2025

Paintch Post-Impressionist Painter Vincent Van Gogh (1853-1890) สร้างการถ่ายภาพตนเองม�..

วิธีการทาสีวิเศษเรืองแสงเรืองแสง

วิธีการ Sep 14, 2025

ในบทช่วยสอนนี้ฉันจะแสดงวิธีการทาสีรูนลึกลับ..

หมวดหมู่