สำรวจวิธีการสร้างและทำให้รูปร่าง CSS เคลื่อนไหวใน Divi

การสร้างรูปร่างโดยใช้ CSS ในการออกแบบเว็บไม่ใช่แนวคิดใหม่แต่อย่างใด อันที่จริง วิธีการแบบคลาสสิกในการสร้างรูปร่าง CSS ส่วนใหญ่ถูกบดบังด้วยโซลูชันกราฟิก HTML อื่นๆ เช่น Canvas และ SVG อย่างไรก็ตาม รูปร่าง CSS (อย่างน้อยก็รูปร่างพื้นฐาน) นั้นสร้างได้ง่ายกว่ามากและยังคงมีบทบาทสำคัญในการออกแบบเว็บ นอกจากนี้ เมื่อคุณเพิ่มแอนิเมชั่นการเลื่อนให้กับรูปร่างเหล่านี้ องค์ประกอบการออกแบบใหม่ทั้งหมดก็สามารถปรากฏขึ้นได้

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

มาเริ่มกันเลย.

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

สำรวจวิธีการสร้างรูปร่าง CSS ด้วยแอนิเมชั่นใน Divi

โครงสร้างแถวและคอลัมน์

ขั้นแรก เพิ่มแถวคอลัมน์หนึ่งในสามสองในสามในส่วน

ก่อนที่เราจะดำเนินการใดๆ ให้เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 95%
• ความกว้างสูงสุด: 900px

หมายเหตุ: การตั้งค่าเหล่านี้มีความสำคัญต่อการตั้งค่าการออกแบบของเรา ตัวอย่างเช่น โครงสร้างคอลัมน์หนึ่งในสามสองในสามรวมกับแถวที่มีความกว้างสูงสุด 900px โดยไม่มีระยะขอบ (ความกว้างของรางน้ำ 1) ให้เราทราบว่าคอลัมน์ด้านซ้ายจะมีความกว้าง 300px พอดี นอกจากนี้ หากฉันเก็บการออกแบบของฉันไว้ในคอลัมน์ความกว้าง 300px นี้ ฉันก็มั่นใจได้ว่าจะดูดีบนแท็บเล็ตและโทรศัพท์มือถือเช่นกัน

การเพิ่มตัวแบ่งโมดูล Spacer

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

ณ จุดนี้ คุณควรเปิดโมดอลมุมมองเลเยอร์เพื่อจัดการเลเยอร์/โมดูลในอนาคต ซึ่งสามารถพบได้ในเมนูการตั้งค่าของ Divi Builder

เปิดการตั้งค่าตัวแบ่งและอัปเดตความสูงของตัวแบ่งดังนี้:

• แสดงตัวแบ่ง: NO
• ส่วนสูง: 150px

เนื่องจากรูปร่าง CSS ของเราจะอยู่ในตำแหน่งที่แน่นอน ระยะห่างจริงของพื้นที่คอลัมน์สามารถปรับได้โดยการปรับความสูงของตัวแบ่ง โดยส่วนตัวแล้ว ฉันพบว่าวิธีนี้ง่ายกว่าการพยายามปรับความสูงหรือระยะห่างของคอลัมน์ นอกจากนี้ยังให้โบนัสเพิ่มเติมแก่คุณในการจัดสไตล์ตัวแบ่งให้เป็นองค์ประกอบการออกแบบเพิ่มเติม (หรือรูปร่าง) สำหรับตอนนี้ คุณสามารถคิดว่ามันเป็นผืนผ้าใบสำหรับการออกแบบ CSS Shape ในอนาคตของคุณ

การสร้างรูปร่าง CSS แรกโดยใช้ตัวเลือกเส้นขอบ

ในการสร้าง CSS Shape เราจะใช้โมดูลตัวแบ่ง ในทางเทคนิค เราใช้เส้นขอบที่ล้อมรอบโมดูลเท่านั้น ไม่ใช้พื้นที่โมดูล (ดังนั้น คุณสามารถใช้โมดูลอื่นๆ เช่น โมดูลข้อความ หรือโมดูลโค้ดได้เช่นกัน)

ในการสร้าง CSS Shape ให้ทำซ้ำโมดูลตัวแบ่งที่สร้างไว้ก่อนหน้านี้

จากนั้นนำความสูงและความกว้างของโมดูลตัวแบ่งออกโดยตั้งค่าแต่ละส่วนเป็น 0px ดังนี้:

• ความกว้าง: 0px
• ส่วนสูง: 0px

สำหรับรูปร่างแรก เราจะสร้างสามเหลี่ยมมุมฉากที่ชี้ไปทางขวาบน เมื่อต้องการทำเช่นนี้ ให้อัปเดตลักษณะเส้นขอบของตัวแบ่งดังนี้:

• สีของเส้นขอบ: rgba(245,44,143,0.5)
• ความกว้างขอบด้านบน: 150px
• ความกว้างของเส้นขอบด้านซ้าย: 150px
• ขอบซ้ายสี: โปร่งใส

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

ยังเป็นความคิดที่ดีที่จะติดป้ายกำกับตัวแบ่งใหม่นี้เป็น "รูปร่าง 1" เพื่อให้ง่ายต่อการระบุในภายหลัง

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

ใต้แท็บขั้นสูง ให้เปลี่ยนตำแหน่งเป็นค่าสัมบูรณ์และตั้งค่าตำแหน่งเริ่มต้นไว้ที่ด้านบนขวา:

• ตำแหน่ง: Absolute
• ตำแหน่งตำแหน่ง: บนขวา (ค่าเริ่มต้น)

หมายเหตุ: สิ่งสำคัญคือต้องรักษาตำแหน่งตำแหน่งไว้ด้านบนขวา เนื่องจากตำแหน่งอื่นๆ ที่เพิ่มตำแหน่งที่อยู่ตรงกลาง (เช่น กึ่งกลางด้านบนหรือตรงกลาง) จะขัดแย้งกับตัวเลือกการแปลงที่เราจะเพิ่มลงใน CSS Shapes ในภายหลัง

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

การสร้างรูปร่าง 2 ด้วย Scroll Animation

ในการสร้างรูปร่างถัดไป (หรือสามเหลี่ยมในกรณีนี้) ให้ทำซ้ำโมดูลตัวแบ่งก่อนหน้า (รูปร่างที่ 1) เพื่อเพิ่มสามเหลี่ยมมุมขวาบนเหมือนกันที่วางทับรูปร่างสามเหลี่ยมก่อนหน้าโดยตรง

จากนั้นติดป้ายว่า "รูปร่างที่ 2"

เปิดการตั้งค่าสำหรับตัวแบ่ง "รูปร่าง 2" และเพิ่มเอฟเฟกต์การแปลงแบบหมุนต่อไปนี้:

• เอฟเฟกต์การเปลี่ยนการเลื่อน: การหมุน
• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0 ° (ที่ 30%)
• การหมุนกลาง: 45 ° (ที่ 45%)
• สิ้นสุดการหมุน: 90° (ที่ 60%)

การสร้างรูปร่าง 3 ด้วย Scroll Animation

ทำซ้ำโมดูลตัวแบ่ง "รูปร่าง 2" และติดป้ายกำกับว่า "รูปร่าง 3" ที่ซ้ำกัน

จากนั้นอัปเดตการตั้งค่าการหมุนของการแปลงดังนี้:

• การหมุนกลาง: 90°
• สิ้นสุดการหมุน: 180 °

ในการสร้างรูปร่างสุดท้าย (ที่สี่) ให้ทำซ้ำโมดูลตัวแบ่งรูปร่าง 3 และติดป้ายกำกับว่า "รูปร่าง 4"

จากนั้นอัปเดตการตั้งค่าการหมุนของการแปลงดังนี้:

• การหมุนกลาง: 180 °
• สิ้นสุดการหมุน: 270 °

ณ จุดนี้ คุณควรเห็นรูปทรงสี่เหลี่ยมที่สร้างขึ้นโดยสามเหลี่ยมที่ทับซ้อนกันและตอนนี้หมุนแล้ว

การทดสอบภาพเคลื่อนไหวการเลื่อน

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

• ขอบ: 80vh บน 80vh ล่าง

นี่คือสิ่งที่ควรมีลักษณะเมื่อคุณเลื่อนหน้าขึ้นและลง

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

การเพิ่มชื่อจำลองในคอลัมน์ด้านขวา (ไม่บังคับ)

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

คอลัมน์ CSS ที่กำหนดเอง

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

display:flex;
flex-direction:column;
align-items:center;

เมื่อ CSS ของคอลัมน์อยู่ในตำแหน่งแล้ว ให้เพิ่มโมดูลข้อความใหม่ในคอลัมน์ 2

จากนั้นเปิดการตั้งค่าข้อความและอัปเดตเนื้อหาเนื้อหาด้วยหัวข้อ h2 ดังนี้:

<h2>elegant design</h2>

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• หัวข้อที่ 2 แบบอักษร: Poppins
• การจัดแนวข้อความส่วนหัวที่ 2: ค่าเริ่มต้น (เดสก์ท็อป) กึ่งกลาง (แท็บเล็ตและโทรศัพท์)
• ขนาดข้อความของหัวเรื่อง 2: 55px (เดสก์ท็อป), 45px (แท็บเล็ต), 35px (โทรศัพท์)
• ความกว้าง: 100%

ในขณะที่เรากำลังดำเนินการอยู่ ให้เพิ่มเอฟเฟกต์ “การเคลื่อนไหวในแนวนอน” ต่อไปนี้ให้กับข้อความดังต่อไปนี้:

• Scroll Transform Effects: การเคลื่อนไหวในแนวนอน
• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 2 (ที่ 20%)
• ออฟเซ็ตกลาง: 1 (ที่ 35%)
• ออฟเซ็ตสิ้นสุด: -0.6

จากนั้นเปิดแท็บตอบสนองและอัปเดตออฟเซ็ตสิ้นสุดดังนี้:

• Ending Offset (แท็บเล็ตและโทรศัพท์): 0

สำรวจแอนิเมชั่นรูปร่างสามเหลี่ยมมุมขวาบน

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

วิธีง่ายๆ วิธีหนึ่งในการทำเช่นนี้คือใช้การเลือกหลายรายการเพื่อเลือกรูปร่าง CSS ทั้งสี่ (สร้างด้วยโมดูลตัวแบ่ง)

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

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

สำรวจแอนิเมชั่นการออกแบบรูปทรง CSS สามเหลี่ยมขึ้น

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

สำหรับตัวอย่างต่อไปนี้ เราจะสร้างรูปร่าง CSS ของ Upward Triangle (ในทางเทคนิคแล้วคือ สามเหลี่ยมหน้าจั่ว)

ในการดำเนินการนี้ ตรวจสอบให้แน่ใจว่าได้เลือกรูปร่างทั้งหมดหลายแบบและอัปเดตสไตล์เส้นขอบสำหรับแต่ละรายการดังนี้:

• ความกว้างของเส้นขอบขวา: 100px
• สีขอบขวา: โปร่งใส
• ความกว้างขอบล่าง: 100px
• สีขอบล่าง: rgba(245,44,143,0.5)
• ความกว้างของเส้นขอบด้านซ้าย: 100px
• ขอบซ้ายสี: โปร่งใส

อัปเดต Transform Origin เพื่อสำรวจการออกแบบแอนิเมชั่นการเลื่อนแบบใหม่

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

สำรวจแอนิเมชั่นการออกแบบรูปทรงหยดน้ำ CSS

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

ในการดำเนินการนี้ ตรวจสอบให้แน่ใจว่าได้เลือกรูปร่างทั้งหมดหลายแบบและอัปเดตสไตล์เส้นขอบสำหรับแต่ละรายการดังนี้:

• มุมโค้งมน: 0px บนขวา, 50% บนขวา, 50% ล่างขวา, 50% ล่างซ้าย
• ความกว้างขอบล่าง: 150px
• สีขอบล่าง: rgba(245,44,143,0.5)
• ความกว้างของเส้นขอบด้านซ้าย: 150px
• ขอบซ้ายสี: โปร่งใส

จากนั้นปรับค่าต้นทางของการแปลงเพื่อสำรวจการออกแบบแอนิเมชั่นการเลื่อนสำหรับหยดน้ำตา

สำรวจเซกเตอร์ (หรือ Pizza Slice) แอนิเมชั่นการออกแบบรูปร่าง CSS

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

ในการดำเนินการนี้ ตรวจสอบให้แน่ใจว่าได้เลือกรูปร่างทั้งหมดหลายแบบและอัปเดตสไตล์เส้นขอบสำหรับแต่ละรายการดังนี้:

• มุมโค้งมน: 0px บนขวา, 0px บนขวา, 50% ล่างขวา, 50% ล่างซ้าย
• ความกว้างของเส้นขอบขวา: 75px
• สีขอบขวา: โปร่งใส
• ความกว้างขอบล่าง: 75px
• สีขอบล่าง: rgba(245,44,143,0.5)
• ความกว้างของเส้นขอบด้านซ้าย: 75px
• ขอบซ้ายสี: โปร่งใส

จากนั้นปรับต้นกำเนิดการแปลงเพื่อสำรวจการออกแบบแอนิเมชั่นการเลื่อนแบบต่างๆ

สำรวจแอนิเมชั่นการออกแบบรูปทรงสี่เหลี่ยมคางหมู CSS

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

ในการดำเนินการนี้ ตรวจสอบให้แน่ใจว่าได้เลือกรูปร่างทั้งหมดหลายแบบและอัปเดตสไตล์เส้นขอบสำหรับแต่ละรายการดังนี้:

• มุมโค้งมน: 0px
• ความกว้างของเส้นขอบขวา: 100px
• สีขอบขวา: โปร่งใส
• ความกว้างขอบล่าง: 100px
• สีขอบล่าง: rgba(245,44,143,0.5)
• ความกว้างของเส้นขอบด้านซ้าย: 100px
• ขอบซ้ายสี: โปร่งใส

จากนั้นอัปเดตความกว้างของรูปร่าง/โมดูลดังนี้:

• ความกว้าง: 100px

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

ผลลัพธ์สุดท้าย

มาดูการออกแบบที่ฉันโปรดปรานในขั้นสุดท้ายซึ่งเป็นไปได้โดยใช้บทช่วยสอนนี้

ความคิดสุดท้าย

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

หวังว่านี่จะให้แนวคิดบางประการเกี่ยวกับวิธีเพิ่มแอนิเมชั่น CSS Shape ที่สมบูรณ์แบบให้กับไซต์ของคุณเอง

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!