เมื่อเร็วๆ นี้ ฉันได้รีเฟรชกราฟิกแอนิเมชั่นบนเว็บไซต์ของฉันด้วยธีมใหม่และกลุ่มตัวละครบุกเบิก โดยนำเทคนิคมากมายที่ฉันแบ่งปันในซีรีส์นี้ไปใช้ปฏิบัติ แอนิเมชั่นบางส่วนของฉันเปลี่ยนรูปลักษณ์เมื่อมีคนโต้ตอบกับพวกเขาหรือในเวลาที่ต่างกันของวัน
สีสันในกราฟิกบนหน้าบล็อกของฉันเปลี่ยนตั้งแต่เช้าจนถึงกลางคืนทุกวัน จากนั้นมีโหมดหิมะซึ่งเพิ่มสีสันที่หนาวเย็นและธีมฤดูหนาว โดยได้รับความอนุเคราะห์จากเลเยอร์ซ้อนทับและโหมดการผสม
ในขณะที่ทำงานนี้ ฉันเริ่มสงสัยว่าค่าสีสัมพันธ์ของ CSS จะช่วยให้ฉันควบคุมได้มากขึ้นในขณะเดียวกันก็ทำให้กระบวนการง่ายขึ้นหรือไม่ หมายเหตุ: ในบทช่วยสอนนี้ ฉันจะเน้นไปที่ค่าสีที่สัมพันธ์กันและพื้นที่สี OKLCH สำหรับกราฟิกและภาพเคลื่อนไหวตามธีม หากคุณต้องการเจาะลึกลงไปในสีที่สัมพันธ์กัน Ahmad Shadeed ได้สร้างคู่มือเชิงโต้ตอบที่ยอดเยี่ยมขึ้นมา ในส่วนของปริภูมิสี ขอบเขต และ OKLCH นั้น Geoff Graham ของเราเองได้เขียนเกี่ยวกับสิ่งเหล่านั้น
การใช้องค์ประกอบซ้ำๆ ถือเป็นกุญแจสำคัญ พื้นหลังจะถูกนำมาใช้ซ้ำทุกครั้งที่เป็นไปได้ โดยมีการซูมและภาพซ้อนทับที่ช่วยสร้างฉากใหม่ๆ จากอาร์ตเวิร์กชิ้นเดียวกัน มันเกิดจากความจำเป็น แต่ยังส่งเสริมการคิดในแง่ของซีรีส์มากกว่าฉากแต่ละฉากด้วย ปัญหาเกี่ยวกับการอัปเดตจานสีด้วยตนเอง มาตรงไปที่ความท้าทายของฉันกันดีกว่า ในชื่อตูนแบบนี้ — อิงจากตอนของ Yogi Bear Show ปี 1959 เรื่อง “Lullabye-Bye Bear” — และงานของฉันโดยทั่วไป จานสีจะถูกจำกัดไว้เพียงไม่กี่สีเท่านั้น
ฉันสร้างเฉดสีและสีอ่อนจากสิ่งที่ฉันเรียกว่าสี "รองพื้น" เพื่อขยายพาเล็ตโดยไม่ต้องเพิ่มเฉดสีอีก
ใน Sketch ฉันทำงานในพื้นที่สี HSL ดังนั้นกระบวนการนี้จึงเกี่ยวข้องกับการเพิ่มหรือลดค่าความสว่างของสีรองพื้นของฉัน จริงๆ แล้ว มันไม่ใช่งานที่ยาก แต่การเลือกสีรองพื้นที่แตกต่างกันนั้นจำเป็นต้องสร้างเฉดสีและโทนสีชุดใหม่ทั้งหมด การทำเช่นนั้นด้วยตนเองครั้งแล้วครั้งเล่าจะกลายเป็นเรื่องลำบากอย่างรวดเร็ว
ฉันพูดถึง HSL — H (เฉดสี), S (ความอิ่มตัว) และ L (ความสว่าง) — ปริภูมิสี แต่นั่นเป็นเพียงหนึ่งในหลายวิธีในการอธิบายสี RGB — R (แดง), G (เขียว), B (น้ำเงิน) — น่าจะเป็นสิ่งที่คุ้นเคยมากที่สุด อย่างน้อยก็ในรูปแบบ Hex นอกจากนี้ยังมี LAB — L (ความสว่าง), A (เขียว–แดง), B (น้ำเงิน–เหลือง) — และรุ่นใหม่กว่า แต่ตอนนี้ได้รับการรองรับอย่างกว้างขวาง LCH — L (ความสว่าง), C (โครมา), H (เฉดสี) — โมเดลในรูปแบบ OKLCH ด้วย LCH — โดยเฉพาะ OKLCH ใน CSS — ฉันสามารถปรับค่าความสว่างของสีรองพื้นได้
หรือฉันสามารถเปลี่ยนโครมาของมันได้ ความอิ่มตัวของสี LCH chroma และ HSL อธิบายถึงความเข้มหรือความสมบูรณ์ของสี แต่จะอธิบายในลักษณะที่ต่างกัน LCH ช่วยให้ฉันมีช่วงกว้างขึ้นและการผสมสีที่คาดเดาได้มากขึ้น
ฉันยังสามารถเปลี่ยนสีเพื่อสร้างจานสีที่มีค่าความสว่างและสีเหมือนกันได้ ในทั้ง HSL และ LCH สเปกตรัมสีเริ่มต้นที่สีแดง เคลื่อนผ่านสีเขียวและสีน้ำเงิน และกลับสู่สีแดง
เหตุใด OKLCH จึงเปลี่ยนวิธีคิดเกี่ยวกับสี ขณะนี้การรองรับเบราว์เซอร์สำหรับปริภูมิสี OKLCH แพร่หลาย แม้ว่าเครื่องมือการออกแบบ รวมถึง Sketch จะยังตามไม่ทันก็ตาม โชคดีที่นั่นไม่ควรหยุดคุณจากการใช้ OKLCH เบราว์เซอร์จะแปลงค่า Hex, HSL, LAB และ RGB เป็น OKLCH ให้กับคุณอย่างมีความสุข คุณสามารถกำหนดคุณสมบัติที่กำหนดเองของ CSS ด้วยสีรองพื้นในพื้นที่ใดก็ได้ รวมถึง Hex: /* สีรองพื้น */ --มูลนิธิ: #5accd6;
สีใดๆ ที่ได้มาจากมันจะถูกแปลงเป็น OKLCH โดยอัตโนมัติ: --foundation-light: oklch(จาก var(--foundation) [...]; } --foundation-mid: oklch(จาก var(--foundation) [...]; } --foundation-dark: oklch(จาก var(--foundation) [...]; }
สีสัมพัทธ์เป็นระบบการออกแบบ ลองนึกถึงสีที่สัมพันธ์กันโดยพูดว่า: “เอาสีนี้มาปรับแต่ง แล้วให้ผลลัพธ์มา” การปรับสีมีสองวิธี: การเปลี่ยนแปลงแบบสัมบูรณ์และการเปลี่ยนแปลงตามสัดส่วน พวกมันดูคล้ายกันในโค้ด แต่มีพฤติกรรมแตกต่างออกไปมากเมื่อคุณเริ่มเปลี่ยนสีรองพื้น การทำความเข้าใจความแตกต่างนั้นคือสิ่งที่สามารถเปลี่ยนการใช้สีสัมพัทธ์ให้เป็นระบบได้ /* สีรองพื้น */ --มูลนิธิ: #5accd6;
ตัวอย่างเช่น ค่าความสว่างของสีรองพื้นของฉันคือ 0.7837 ในขณะที่รุ่นที่เข้มกว่ามีค่า 0.5837 ในการคำนวณความแตกต่าง ฉันจะลบค่าที่ต่ำกว่าออกจากค่าที่สูงกว่า และใช้ผลลัพธ์โดยใช้ฟังก์ชัน calc(): --รองพื้น-สีเข้ม: oklch(จาก var(--foundation) คำนวณ(ลิตร - 0.20) ช ชั่วโมง);
เพื่อให้ได้สีที่สว่างขึ้น ฉันจึงเพิ่มความแตกต่างแทน: --มูลนิธิ-แสง: oklch(จาก var(--foundation) คำนวณ(l + 0.10) c h);
โครมาการปรับเปลี่ยนเป็นไปตามกระบวนการเดียวกัน เพื่อลดความเข้มของสีรองพื้นจาก 0.1035 เป็น 0.0035 ฉันจะลบค่าหนึ่งออกจากอีกค่าหนึ่ง: oklch(จาก var(--foundation) ล. คำนวณ(c - 0.10) ชม.);
ในการสร้างจานสี ฉันจะคำนวณความแตกต่างระหว่างค่าสีของสีรองพื้น (200) และเฉดสีใหม่ (260) oklch(จาก var(--foundation) lc คำนวณ(h + 60));
การคำนวณเหล่านั้นถือเป็นผลสัมบูรณ์ เมื่อฉันลบจำนวนคงที่ ฉันจะพูดอย่างมีประสิทธิภาพว่า "ลบมากเท่านี้เสมอ" เช่นเดียวกับเมื่อเพิ่มค่าคงที่: คำนวณ(c - 0.10) คำนวณ(c + 0.10)
ฉันได้เรียนรู้ขีดจำกัดของแนวทางนี้อย่างยากลำบาก เมื่อฉันอาศัยการลบค่าโครมาคงที่ สีจะยุบลงเป็นสีเทาทันทีที่ฉันเปลี่ยนรองพื้น จานสีที่ใช้ได้ผลกับสีหนึ่งก็แตกสลายไปอีกสีหนึ่ง การคูณมีพฤติกรรมแตกต่างออกไป เมื่อฉันคูณโครมา ฉันกำลังบอกเบราว์เซอร์ว่า "ลดความเข้มของสีนี้ลงตามสัดส่วน" ความสัมพันธ์ระหว่างสียังคงเหมือนเดิม แม้ว่ารองพื้นจะเปลี่ยนไป: คำนวณ(ค * 0.10)
กฎการเคลื่อนย้าย ปรับขนาด และหมุนของฉัน
ย้ายความสว่าง (บวกหรือลบ) สเกลโครมา (คูณ) หมุนสี (บวกหรือลบองศา)
ฉันปรับขนาดโครมาเพราะฉันต้องการให้การเปลี่ยนแปลงความเข้มคงสัดส่วนกับสีพื้นฐาน ความสัมพันธ์ของสีเป็นแบบหมุนเวียน ดังนั้นการเพิ่มสีสันจึงไม่สมเหตุสมผล ความเบาเป็นการรับรู้และสัมบูรณ์ - การคูณมักให้ผลลัพธ์ที่แปลก
จากสีเดียวไปจนถึงทั้งธีม สีสัมพัทธ์ช่วยให้ฉันกำหนดสีรองพื้นและสร้างสีอื่นๆ ที่ฉันต้องการได้ เช่น การเติม การลากเส้น การหยุดการไล่ระดับสี และเงา จากนั้น เมื่อถึงจุดนั้น สีจะหยุดเป็นจานสีและเริ่มเป็นระบบ ภาพประกอบ SVG มีแนวโน้มที่จะนำสีเดิมสองสามสีมาใช้ซ้ำทั้งการเติม ลายเส้น และการไล่ระดับสี สีสัมพัทธ์ช่วยให้คุณกำหนดความสัมพันธ์เหล่านั้นได้เพียงครั้งเดียวและนำมาใช้ซ้ำได้ทุกที่ เหมือนกับที่แอนิเมชั่นนำพื้นหลังมาใช้ซ้ำเพื่อสร้างฉากใหม่
เปลี่ยนสีรองพื้นหนึ่งครั้ง และสีที่ได้รับทั้งหมดจะอัปเดตโดยอัตโนมัติ โดยไม่ต้องคำนวณอะไรใหม่ด้วยมือ นอกเหนือจากกราฟิกแอนิเมชั่น ฉันสามารถใช้แนวทางเดียวกันนี้ในการกำหนดสีสำหรับสถานะขององค์ประกอบเชิงโต้ตอบ เช่น ปุ่มและลิงก์ สีรองพื้นที่ฉันใช้ชื่อเรื่องการ์ตูนเรื่อง “Lullabye-Bye Bear” จะเป็นสีฟ้าอมฟ้า พื้นหลังเป็นการไล่ระดับสีแบบรัศมีระหว่างรองพื้นของฉันกับรุ่นที่เข้มกว่า
หากต้องการสร้างเวอร์ชันอื่นที่มีอารมณ์แตกต่างกันโดยสิ้นเชิง ฉันเพียงแค่ต้องเปลี่ยนสีรองพื้น: --มูลนิธิ: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(จาก var(--foundation) คำนวณ(l - 0.2357) คำนวณ(c * 0.833) ชม.);
ในการผูกคุณสมบัติแบบกำหนดเองเหล่านั้นเข้ากับการไล่ระดับสี SVG ของฉันโดยไม่ทำซ้ำค่าสี ฉันจึงแทนที่ค่าสีหยุดแบบฮาร์ดโค้ดด้วยสไตล์อินไลน์:
ต่อไป ฉันต้องแน่ใจว่า Toon Text ของฉันตัดกับสีรองพื้นที่ฉันเลือกเสมอ การหมุนเฉดสี 180 องศาทำให้เกิดสีที่เข้ากันซึ่งโดดเด่นอย่างแน่นอน แต่อาจสั่นได้อย่างอึดอัด: .ข้อความแสง { กรอก: oklch (จาก var (--foundation) l c คำนวณ(h + 180)); }
การเลื่อน 90° จะสร้างสีรองที่สดใสโดยไม่ต้องเสริมกันอย่างสมบูรณ์: .ข้อความแสง { กรอก: oklch (จาก var (--foundation) ล. ค คำนวณ(h - 90)); }
การประดิษฐ์ชื่อตูนปี 1959 ของ Quick Draw McGraw เรื่อง “El Kabong” ของฉันใช้เทคนิคเดียวกันแต่มีชุดสีที่หลากหลายกว่า ตัวอย่างเช่น มีการไล่ระดับสีแบบรัศมีอีกแบบหนึ่งระหว่างสีรองพื้นและเฉดสีเข้ม
อาคารและต้นไม้ที่อยู่ด้านหลังเป็นเพียงเฉดสีที่แตกต่างกันของสีรองพื้นเดียวกัน สำหรับเส้นทางเหล่านั้น ฉันต้องการสีเติมเพิ่มเติมสองสี: .bg-กลาง { กรอก: oklch (จาก var (--foundation) คำนวณ(l - 0.04) คำนวณ(c * 0.91) ชม.); }
.bg-มืด { กรอก: oklch (จาก var (--foundation) คำนวณ(l - 0.12) คำนวณ(c * 0.64) ชม.); }
เมื่อฐานรากเริ่มเคลื่อนไหว จนถึงตอนนี้ ทุกสิ่งที่ฉันแสดงยังคงเป็นแบบคงที่ แม้ว่าบางคนจะใช้เครื่องมือเลือกสีในการเปลี่ยนสีรองพื้น การเปลี่ยนแปลงนั้นก็จะเกิดขึ้นทันที แต่กราฟิกแอนิเมชั่นไม่ค่อยหยุดนิ่ง — เบาะแสอยู่ในชื่อ ดังนั้น หากสีเป็นส่วนหนึ่งของระบบ ก็ไม่มีเหตุผลที่มันจะทำให้เคลื่อนไหวไม่ได้เช่นกัน หากต้องการทำให้สีรองพื้นเคลื่อนไหว ฉันต้องแยกสีรองพื้นออกเป็นช่อง OKLCH ก่อน— ความสว่าง โครมา และเฉดสี แต่มีขั้นตอนพิเศษที่สำคัญ: ฉันจำเป็นต้องลงทะเบียนค่าเหล่านั้นเป็นคุณสมบัติแบบกำหนดเองที่พิมพ์ แต่นั่นหมายความว่าอย่างไร? ตามค่าเริ่มต้น เบราว์เซอร์จะไม่ทราบว่าค่าคุณสมบัติที่กำหนดเองของ CSS แสดงถึงสี ความยาว ตัวเลข หรืออย่างอื่นทั้งหมดหรือไม่ ซึ่งมักหมายความว่าไม่สามารถสอดแทรกได้อย่างราบรื่นระหว่างแอนิเมชั่น และข้ามจากค่าหนึ่งไปยังอีกค่าหนึ่ง การลงทะเบียนคุณสมบัติที่กำหนดเองจะบอกเบราว์เซอร์ถึงประเภทของค่าที่แสดงและวิธีการทำงานของคุณสมบัติเมื่อเวลาผ่านไป ในกรณีนี้ ฉันต้องการให้เบราว์เซอร์ถือว่าช่องสีของฉันเป็นตัวเลขเพื่อให้สามารถเคลื่อนไหวได้อย่างราบรื่น @property --f-l { ไวยากรณ์: "<หมายเลข>"; สืบทอด: จริง; ค่าเริ่มต้น: 0.40; }
@property --f-c { ไวยากรณ์: "<หมายเลข>"; สืบทอด: จริง; ค่าเริ่มต้น: 0.11; }
@property --f-h { ไวยากรณ์: "<หมายเลข>"; สืบทอด: จริง; ค่าเริ่มต้น: 305; }
เมื่อลงทะเบียนแล้ว คุณสมบัติแบบกำหนดเองเหล่านี้จะทำงานเหมือนกับ CSS ดั้งเดิม เบราว์เซอร์สามารถแก้ไขได้ทีละเฟรม จากนั้นฉันก็สร้างสีรองพื้นขึ้นมาใหม่จากช่องเหล่านั้น: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
ซึ่งจะทำให้สีรองพื้นสามารถเคลื่อนไหวได้ เช่นเดียวกับค่าตัวเลขอื่นๆ ต่อไปนี้เป็นแอนิเมชัน "การหายใจ" ง่ายๆ ที่ค่อยๆ เปลี่ยนความสว่างเมื่อเวลาผ่านไป: @keyframes หายใจ { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-ชื่อ { แอนิเมชั่น: หายใจเข้าออก 10 วินาทีอย่างไม่สิ้นสุด; }
เนื่องจากสีอื่นๆ ทั้งหมดในการเติม การไล่ระดับสี และลายเส้นนั้นได้มาจาก --foundation สีทั้งหมดจึงเคลื่อนไหวพร้อมกัน และไม่จำเป็นต้องอัปเดตด้วยตนเอง แอนิเมชั่นสีเดียว เอฟเฟ็กต์มากมาย ในช่วงเริ่มต้นของกระบวนการนี้ ฉันสงสัยว่าค่าสีสัมพันธ์ของ CSS จะให้ความเป็นไปได้มากกว่าเดิมในขณะเดียวกันก็ทำให้นำไปใช้งานได้ง่ายขึ้นหรือไม่ ฉันเพิ่งเพิ่มพื้นหลังเหมืองทองคำใหม่ลงในหน้าติดต่อของเว็บไซต์ของฉัน และการทำซ้ำครั้งแรกมีตะเกียงน้ำมันที่เรืองแสงและแกว่งไปมา
ฉันต้องการสำรวจว่าการสร้างภาพเคลื่อนไหวด้วยสีที่สัมพันธ์กันของ CSS จะทำให้ภายในเหมืองดูสมจริงยิ่งขึ้นได้อย่างไรโดยการแต้มสีจากโคมไฟ ฉันอยากให้พวกเขาส่งผลต่อโลกรอบตัวพวกเขา เหมือนกับที่แสงจริงๆ ทำ ดังนั้น แทนที่จะสร้างภาพเคลื่อนไหวหลายสี ฉันสร้างระบบไฟส่องสว่างเล็กๆ ที่สร้างภาพเคลื่อนไหวเพียงสีเดียว
งานแรกของฉันคือการวางเลเยอร์ซ้อนทับระหว่างพื้นหลังกับโคมไฟของฉัน: <เส้นทาง id = "ซ้อนทับ" กรอก = "var (--overlay-tint)" [...] style="โหมดมิกซ์เบลนด์: สี" />
ฉันใช้โหมดมิกซ์เบลนด์: สี เพราะจะทำให้สิ่งที่อยู่ข้างใต้สีอ่อนลง ในขณะเดียวกันก็รักษาความสว่างที่อยู่ข้างใต้ไว้ เนื่องจากฉันต้องการให้มองเห็นโอเวอร์เลย์ได้เฉพาะเมื่อเปิดภาพเคลื่อนไหว ฉันจึงเลือกใช้โอเวอร์เลย์: .svg-mine #overlay { จอแสดงผล: ไม่มี; }
@media (ชอบลดการเคลื่อนไหว: ไม่มีการตั้งค่า) { .svg-mine[data-animations=on] #overlay { จอแสดงผล: บล็อก; ความทึบ: 0.5; } }
มีการวางซ้อนไว้แล้ว แต่ยังไม่ได้เชื่อมต่อกับโคมไฟ ฉันต้องการแหล่งกำเนิดแสง โคมไฟของฉันเป็นแบบเรียบง่าย และแต่ละดวงมีองค์ประกอบเป็นวงกลมที่ฉันเบลอด้วยฟิลเตอร์ ฟิลเตอร์สร้างภาพเบลอที่นุ่มนวลมากทั่วทั้งวงกลม
แทนที่จะสร้างแอนิเมชันโอเวอร์เลย์และโคมไฟแยกจากกัน ฉันจะสร้างโทเค็นสี “เปลวไฟ” เดี่ยวๆ ขึ้นมาและรับสิ่งอื่นๆ จากสิ่งนั้น ขั้นแรก ฉันลงทะเบียนคุณสมบัติแบบกำหนดเองสามประเภทสำหรับช่อง OKLCH: @property --fl-l { ไวยากรณ์: "<หมายเลข>"; สืบทอด: จริง; ค่าเริ่มต้น: 0.86; } @property --fl-c { ไวยากรณ์: "<หมายเลข>"; สืบทอด: จริง; ค่าเริ่มต้น: 0.12; } @property --fl-h { ไวยากรณ์: "<หมายเลข>"; สืบทอด: จริง; ค่าเริ่มต้น: 95; }
ฉันสร้างภาพเคลื่อนไหวให้กับช่องเหล่านั้น โดยตั้งใจดันเฟรมสองสามเฟรมไปทางสีส้ม เพื่อให้การกะพริบอ่านได้ชัดเจนว่าเป็นแสงไฟ:
@keyframes เปลวไฟ { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --ชั้น-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --ชั้น-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --ชั้น-H: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --ชั้น-H: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --ชั้น-H: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --ชั้น-h: 98; } 92% {--fl-l: 0.80; --fl-c: 0.17; --ชั้น-h: 74; } }
จากนั้น ฉันกำหนดขอบเขตภาพเคลื่อนไหวนั้นไว้ที่ SVG ดังนั้นตัวแปรที่แชร์จึงพร้อมใช้งานสำหรับทั้งหลอดไฟและโอเวอร์เลย์ของฉัน:
@media (ชอบลดการเคลื่อนไหว: ไม่มีการตั้งค่า) { .svg-mine[ข้อมูลภาพเคลื่อนไหว=บน] { ภาพเคลื่อนไหว: เปลวไฟ 3.6s เชิงเส้นไม่มีที่สิ้นสุด; การแยก: แยก;
/* สร้างสีเปลวไฟจากช่องการ์ตูน */ --เปลวไฟ: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* สีโคมไฟที่ได้มาจากเปลวไฟ */ --lamp-core: oklch (จาก var (--flame) calc (l + 0.05) calc (c * 0.70) h);
/* สีทับซ้อนที่ได้มาจากเปลวไฟเดียวกัน */ --overlay-tint: oklch (จาก var (--flame) คำนวณ(l + 0.06) คำนวณ(c * 0.65) คำนวณ(h - 10)); } }
สุดท้าย ฉันใส่สีที่ได้รับเหล่านั้นกับโคมไฟที่ส่องสว่างและโอเวอร์เลย์ที่สีเหล่านั้นส่งผลกระทบ: @media (ชอบลดการเคลื่อนไหว: ไม่มีการตั้งค่า) { .svg-mine[data-animations=on] #mine-lamp-1 > วงกลม .svg-mine[data-animations=on] #mine-lamp-2 > วงกลม { เติม: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { จอแสดงผล: บล็อก; เติม: var(--overlay-tint); ความทึบ: 0.5; } }
เมื่อเปลวไฟเปลี่ยนเป็นสีส้ม โคมไฟจะอุ่นขึ้น และฉากก็จะอบอุ่นไปด้วย เมื่อเปลวไฟเย็นลง ทุกอย่างก็สงบลง ส่วนที่ดีที่สุดคือไม่มีสิ่งใดถูกเขียนด้วยตนเอง ถ้าฉันเปลี่ยนสีรองพื้นหรือปรับแต่งช่วงภาพเคลื่อนไหวของเปลวไฟ ระบบแสงทั้งหมดจะอัปเดตพร้อมกัน คุณสามารถดูผลลัพธ์สุดท้ายได้จากเว็บไซต์ของฉัน นำมาใช้ใหม่ นำกลับมาใช้ใหม่ นักสร้างแอนิเมชันของ Hanna-Barbera ถูกบังคับให้นำองค์ประกอบต่างๆ มาใช้ใหม่โดยไม่จำเป็น แต่ฉันใช้สีซ้ำเพราะมันทำให้งานของฉันสอดคล้องกันมากขึ้นและง่ายต่อการบำรุงรักษา ค่าสีสัมพันธ์ CSS ช่วยให้ฉันสามารถ:
กำหนดสีรองพื้นสีเดียว อธิบายว่าสีอื่นๆ เกี่ยวข้องกับมันอย่างไร นำความสัมพันธ์เหล่านั้นกลับมาใช้ใหม่ทุกที่และ ทำให้ระบบเคลื่อนไหวโดยการเปลี่ยนค่าหนึ่งค่า
สีที่สัมพันธ์กันไม่เพียงทำให้การจัดธีมง่ายขึ้นเท่านั้น มันส่งเสริมวิธีคิดที่สี เช่น การเคลื่อนไหว เป็นความตั้งใจ และการเปลี่ยนค่าหนึ่งสามารถเปลี่ยนฉากทั้งฉากได้โดยไม่ต้องเขียนงานที่อยู่ข้างใต้นั้นใหม่
