สร้างศิลปะ CSS เคลื่อนไหว

Jan 31, 2026
วิธีการ
CSS art
(เครดิตรูปภาพ: ทิฟฟานี่พงษ์)

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

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

สำหรับแรงบันดาลใจมากขึ้นสำรวจ Roundup ที่น่าทึ่งของเรา ตัวอย่างภาพเคลื่อนไหว CSS . หลังจากบางสิ่งพื้นฐานมากขึ้น? เริ่มต้นด้วยการเรียนรู้ วิธีการสร้างน้ำแข็ง lolly โดยใช้ CSS .

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

ลดการออกแบบให้เป็นรูปร่างที่เรียบง่าย

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

ใช้พื้นหลังที่สดใสเพื่อช่วยในการวางตำแหน่ง

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

ใช้ขนาดของเหลว

เมื่อพูดถึงการกำหนดค่า PX สำหรับคุณสมบัติเราขอแนะนำให้ใช้หน่วย REM ในกรณีที่คุณตัดสินใจว่าคุณต้องการให้ชิ้นส่วนโดยรวมของคุณมีขนาดใหญ่ขึ้นหรือเล็กลงโดยใช้หน่วย REM ที่คุณต้องเปลี่ยนฐานเท่านั้น HTML {ขนาดตัวอักษร: ... PX} ใน Sass ของคุณในการปรับขนาดงานศิลปะทั้งหมดขึ้นหรือลง

เมื่อกำหนดความสูงและความกว้างขององค์ประกอบเด็กที่ควรมีการปรับขนาดญาติให้กับผู้ปกครองเปอร์เซ็นต์ที่มีประโยชน์ เนื่องจากค่าเหล่านี้เกี่ยวข้องกับผู้ปกครองของพวกเขาเสมอพวกเขาควรปรับขนาดด้วย ขนาดตัวอักษร HTML .

Generate CSS

Generate CSS เป็นงานประชุมตามความต้องการของ Bespoke ที่นำเสนอโดย Creative Bloq, Net และ Web Designer คลิกเพื่อจองตั๋วนกตอนต้นของคุณ! (เครดิตรูปภาพ: เก็ตตี้ / อนาคต)

01. เริ่มต้นด้วยตู้คอนเทนเนอร์

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

 & lt; div class = "คอนเทนเนอร์" & gt;
& lt; div class = "หัว" & gt; & lt; / div & gt;
& lt; div class = "ร่างกาย" & gt; & lt; / div & gt;
& lt; div class = "ลูกโป่ง" & gt; & lt; / div & gt;
& lt; / div & gt;

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

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

02. สไตล์หัว

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

คุณสมบัติใบหน้าจะต้องใช้คอนเทนเนอร์สำหรับการวางตำแหน่งดังนั้นสร้าง & lt; div & gt; ภายในคอนเทนเนอร์หัวสำหรับรูปร่างสีเหลืองที่มีความกว้างความสูงและสีพื้นหลัง - ตอนนี้ให้รูปสี่เหลี่ยมผืนผ้านี้ดูเหมือนรูปร่างหัวมากขึ้น หนึ่งในคุณสมบัติที่พบมากที่สุดและมีประโยชน์ในงานศิลปะ CSS คือ ชายแดนรัศมี คุณสมบัติซึ่งเปลี่ยนเส้นโค้งของมุม X หรือ Y ของกล่องของกล่องและสามารถใช้ในการสร้างรูปร่างอินทรีย์มากขึ้น

การใช้เทคนิคนี้ด้วย Combo REM และเปอร์เซ็นต์คุณสามารถสร้างรูปทรงเหมือนหยดมากกว่าเพียงแค่จุดไข่ปลาธรรมดาซึ่งปรับขนาดตามธรรมชาติด้วย HTML {ขนาดตัวอักษร: ... PX} : 

 .face {
เส้นขอบด้านบนซ้ายรัศมี: 50% 4.5REM;
แนวขอบด้านบนขวา - รัศมี: 50% 4.5REM;
เส้นขอบด้านล่างซ้ายรัศมี: 50% 3Rem;
เส้นขอบด้านล่างขวารัศมี: 50% 3Rem;
...
}

หลังจากที่ศีรษะสมบูรณ์แบบ ชายแดนรัศมี วางตำแหน่งส่วนที่เหลือของใบหน้าเป็นองค์ประกอบของเด็ก ๆ ของหัวเช่นดวงตาแก้มจมูกและหู เหมือนหัว ชายแดนรัศมี เคล็ดลับจะมีประโยชน์ตั้งแต่ เส้นขอบรัศมี: 50% อาจดูไม่น่าสนใจ

03. ย้ายไปที่ร่างกาย

ร่างกาย & lt; div & gt; สามารถวางไว้ในภาชนะบรรจุร่างกายด้านหลังศีรษะและมีรูปร่างเหมือนกัน ชายแดนรัศมี เทคนิคเช่นเดียวกับแขนขาและหาง เพื่อให้สามารถทับซ้อนกันที่เหมาะสมร่างกายจริงควรเป็นองค์ประกอบของตัวเองเนื่องจากองค์ประกอบภายในบางอย่างเช่นแถบด้านหลังจะต้องถูกตัดออกด้วย ล้น: ซ่อน . เพื่อให้ร่างกายลึกมากขึ้น แปลง: เอียง () อสังหาริมทรัพย์สามารถทำให้ร่างกายได้รับเพียงเล็กน้อย

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

04. เพิ่มลูกโป่ง

ตอนนี้เมาส์ไฟฟ้าเสร็จแล้วให้ผูกลูกโป่งกลับมาด้านหลัง เพิ่มบาง & lt; div & gt; S กับสไตล์ที่ใช้ร่วมกันกับสตริงเด็ก & lt; div & gt; และวางตำแหน่งไว้เหนือศีรษะ สตริงที่มองไม่เห็นยกเว้น ขอบซ้าย ซึ่งช่วยให้ดูเป็นเหมือนสตริงได้มากขึ้น

เพื่อผูกสตริงรอบเอวของตัวละคร & lt; div & gt; สามารถวางไว้ในร่างกายเพื่อให้ตำแหน่งที่เหมาะสม สตริงต้องการเส้นโค้งเล็กน้อยที่จะปรากฏราวกับว่ามันเชื่อมโยงกับร่างกายดังนั้นจึงสามารถมีความสูงเล็กน้อย ก้นหาง และ ก้นหาง รัศมีซ้ายและขวาซึ่งทำให้เส้นโค้งบาง ๆ : 

 .string {
ความสูง: 1Rem;
ความกว้าง: 9Rem;
ขวาขวา: ของแข็ง 1px $ white;
ชายแดนซ้าย: ของแข็ง 1px $ white;
เส้นขอบด้านล่าง: ของแข็ง 1px $ สีขาว;
เส้นขอบด้านล่างซ้ายรัศมี: 50% 1Rem;
เส้นขอบด้านล่างขวารัศมี: 50% 1Rem;
}

05. เคลื่อนไหว CSS

เราสามารถให้ชีวิตตัวละครโดยการเพิ่ม @keyframes ภาพเคลื่อนไหว แขนขาหูและหางสามารถเคลื่อนไหวได้ด้วย แปลง: หมุน () . ให้แน่ใจว่า การแปลงต้นกำเนิด ถูกตั้งค่าเป็น 'ข้อต่อ' (I.e. ศูนย์ด้านบนสำหรับขา) และปรับการหมุน ประเภทภาพเคลื่อนไหวนี้สามารถใช้งานได้หลายครั้งใน Sass Mixin: 

 @mixin animaterotate ($ ชื่อ, $ start, $ end) {
@Keyframes # {$ name} {
0%, 100% {transform: หมุน (# {$ start} deg)}
50% {แปลง: หมุน (# {$ end} deg)}
}
}

ในที่สุดการเพิ่ม 5s ช้า แปลง: Translatey () ภาพเคลื่อนไหว Keyframe จะเคลื่อนไหวตัวละครขึ้นและลงราวกับว่ามันลอยอยู่ สำหรับการสัมผัสของความสมจริงภาพเคลื่อนไหวกะพริบโดยใช้ แปลง: scaly (0.1) คุณสมบัติสามารถใช้เพื่อให้ปรากฏราวกับว่าดวงตากำลังปิดอยู่

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

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

  • 5 สิ่งที่คุณไม่เคยรู้เกี่ยวกับ CSS
  • เพิ่มตัวกรอง SVG ด้วย CSS
  • วิธีการรหัสเอฟเฟกต์ข้อความสมาร์ทด้วย CSS

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

วิธีการทาสีศิลปะภาพเคลื่อนไหวที่มีสีสันใน Photoshop

วิธีการ Jan 31, 2026

ในระหว่างการกวดวิชา Photoshop นี้ฉันจะไปมากกว่าแนว�..

วิธีใช้พื้นผิวใน Photoshop

วิธีการ Jan 31, 2026

พื้นผิวมักจะเป็นสิ่งที่ทำให้เกิดเส้นผมระหว่างงานศิลปะแบบดั้งเดิ�..

สร้างแอพมือถือข้ามแพลตฟอร์มด้วยการกระพือของ Google

วิธีการ Jan 31, 2026

มีกรอบมือถือข้ามแพลตฟอร์มจำนวนมากในช่วงหลาย..

สร้างข้อความ 3 มิติใน Photoshop: คู่มือทีละขั้นตอน

วิธีการ Jan 31, 2026

ในการกวดวิชานี้เราจะแสดงวิธีการสร้างชิ้นส่ว..

สร้างชุดไอคอนผลิตภัณฑ์ใน Illustrator

วิธีการ Jan 31, 2026

คลิกที่ไอคอนที่ด้านบนขวาเพื่อขยายไอคอ�..

สีเปียกในน้ำมัน

วิธีการ Jan 31, 2026

ภาพวาด 'Alla Prima' (นั่นคือจิตรกรรมเปียกบนเปียกในหนึ..

แปลงภาพถ่ายเป็นชุด VR

วิธีการ Jan 31, 2026

โดยทั่วไปแล้วเมื่อมีคนกล่าวถึงความเป็นจริงท..

เร่งการสร้างแบบจำลอง 3 มิติของคุณ

วิธีการ Jan 31, 2026

บทช่วยสอนนี้ครอบคลุมกระบวนการสร้างสินทรัพย์..

หมวดหมู่