แอนิเมชั่นพื้นหลังแบบไล่โทนสีอาจเป็นเทคนิคการออกแบบที่ยอดเยี่ยมในการทำให้สีพื้นหลังมีชีวิตชีวาบนของคุณ เว็บไซต์เว็บ. เป็นโซลูชันที่สมบูรณ์แบบสำหรับผู้ที่ต้องการบางสิ่งที่สมจริงมากกว่าสีพื้นหลังแบบคงที่โดยไม่ต้องหันไปใช้พื้นหลังวิดีโอที่โหลดช้า แนวคิดพื้นฐานเบื้องหลังแอนิเมชั่นพื้นหลังไล่ระดับสีคือการใช้ CSS เพื่อสร้างภาพขยายและทำให้พื้นหลังไล่ระดับสีเคลื่อนไหวเพื่อสร้างการเปลี่ยนสีที่เคลื่อนไหวอย่างราบรื่น
ในบทช่วยสอนนี้เราจะแสดงวิธีสร้างภาพเคลื่อนไหวพื้นหลังไล่ระดับสีบน Divi วิธีนี้จะรวมข้อมูลโค้ด CSS ที่กำหนดเองซึ่งจะทำให้สีไล่ระดับสีที่เลือกไว้ในการตั้งค่า Divi แบบรวม การกำหนดค่านั้นค่อนข้างง่ายสำหรับผลลัพธ์ที่สวยงามเช่นนี้
ขอเริ่มต้น!
ผลลัพธ์ที่เป็นไปได้
นี่คือภาพรวมของสองวิธีที่เราสามารถสร้างภาพเคลื่อนไหวพื้นหลังไล่ระดับสีบน Divi
แน่นอน ข้อกำหนดเบื้องต้นสำหรับบทช่วยสอนนี้คือ คุณมี ธีม Divi ติดตั้งและเป็นปัจจุบัน
การสร้างภาพเคลื่อนไหวพื้นหลังไล่ระดับด้วยสารสกัด CSS และตัวเลือกพื้นหลังของ Divi
ในการเริ่มต้นให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนเริ่มต้นใน Divi Builder
การตั้งค่ามาตรา
จากนั้นอัปเดตการตั้งค่าส่วนด้วยภาพพื้นหลัง พื้นหลังไล่ระดับของเราจะถูกเพิ่มเข้าไปในเส้นของเราเพื่อให้ภาพนี้ซ้อนทับกัน
จากนั้นอัปเดตการเติมดังนี้:
- ระยะห่างจากขอบ: 0px สูง, 0px ต่ำ
การตั้งค่าแถวและคอลัมน์
พารามิเตอร์คอลัมน์
เปิดการตั้งค่าแถวแล้วอัปเดตการเติมคอลัมน์ดังนี้:
- การขยาย: ด้านบน 12vw
จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบคอลัมน์หลัก:
height: 40vw;
การตั้งค่าสาย
พื้นหลังไล่ระดับสี
ตอนนี้เราสามารถเพิ่มพื้นหลังไล่ระดับลงในเส้นได้ ตรวจสอบให้แน่ใจว่าได้ทำให้สีไล่ระดับกึ่งโปร่งใสหากคุณต้องการดูภาพพื้นหลังของส่วนนั้น
อัพเดตพารามิเตอร์บรรทัดดังนี้:
- สีพื้นหลังไล่ระดับสีซ้าย: rgba (12,113,195,0.8)
- สีพื้นหลังไล่ระดับสีด้านขวา: rgba (131,0,233,0.8)
- ประเภทการไล่ระดับสี: เชิงเส้น
- ทิศทางการไล่ระดับสี: 45 องศา
ขนาด
จากนั้นอัพเดตขนาดบรรทัดดังต่อไปนี้:
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
คลาส CSS ที่กำหนดเอง
ตอนนี้พื้นหลังไล่ระดับสีของเราเข้าที่แล้วเราต้องเพิ่มภาพเคลื่อนไหวผ่าน CSS ที่กำหนดเอง ก่อนเพิ่มโค้ด CSS เราต้องเพิ่มคลาส CSS ที่กำหนดเองเพื่อกำหนดเป้าหมายแถวนั้น
ไปที่แท็บขั้นสูงและเพิ่มคลาส CSS ต่อไปนี้:
- คลาส CSS: animate-gradient
เพิ่มโมดูลรหัส
เมื่อเพิ่มคลาส CSS ลงในบรรทัดแล้วให้เพิ่มโมดูลโค้ดลงในบรรทัด
วาง CSS ในโมดูลโค้ด
จากนั้นวางรหัส CSS ต่อไปนี้ในพื้นที่โมดูลการตั้งค่ารหัสรหัส:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
อย่าลืมใส่รหัสในไฟล์ <style></style>แท็กเนื่องจากเราเพิ่มลงในโค้ด HTML ของเพจ
ผล
นี่คือผลลัพธ์จนถึงตอนนี้ พื้นหลังไล่ระดับสีได้รับการขยายเป็น 400% ของขนาดต้นฉบับและเคลื่อนไหวได้โดยการเลื่อนไปทางซ้ายและขวา
เพิ่มคำกระตุ้นการตัดสินใจ
เพื่อให้การออกแบบเสร็จสิ้น ให้เพิ่มโมดูลคำกระตุ้นการตัดสินใจเพื่อเป็นส่วนหนึ่งของ เนื้อหา.
การตั้งค่าคำกระตุ้นการตัดสินใจ
เนื้อหา
อัพเดต เนื้อหา ดังนี้:
- เพิ่มชื่อ
- เพิ่มข้อความปุ่ม
- เพิ่มเนื้อความ
- URL ของลิงค์ของปุ่ม: #
- ใช้สีพื้นหลัง: NO
ความคิด
ไปที่แท็บออกแบบและอัปเดตสิ่งต่อไปนี้:
- แบบอักษรของชื่อเรื่อง: Kaushan Script
- ขนาดตัวอักษรหัวเรื่อง: 4vw (เดสก์ท็อป), 30px (โทรศัพท์)
- ความสูงของบรรทัดหัวเรื่อง: 1,4 em
- ตำรวจร่าง: Roboto
- ขนาดข้อความของปุ่ม: 16px
- สีข้อความของปุ่ม: # 555555
- พื้นหลังของปุ่ม: #ffffff
- ความกว้างเส้นขอบของปุ่ม: 0px
- รัศมีเส้นขอบของปุ่ม: 30 พิกเซล
- ระยะห่างระหว่างตัวอักษรของปุ่ม: 3px
- แบบอักษรของปุ่ม: Roboto ย่อ
- น้ำหนักแบบอักษรของปุ่ม: หนา
ผล
ตอนนี้ตรวจสอบผลได้ที่หน้าสดกับ เนื้อหา ของคำกระตุ้นการตัดสินใจที่มีอยู่ นี่จะเป็นส่วนหัวที่ดีสำหรับคุณ เว็บไซต์เว็บ !
จำไว้ว่าคุณสามารถเปลี่ยนสีพื้นหลังของเส้นให้เป็นอะไรก็ได้ที่คุณต้องการ โค้ดจะยังคงทำงานในพื้นหลังเพื่อทำให้พื้นหลังเคลื่อนไหวให้คุณ
หากคุณรู้จัก CSS เล็กน้อยคุณสามารถปรับความเร็วและทิศทางของภาพเคลื่อนไหวได้โดยเปลี่ยนค่าคุณสมบัติของภาพเคลื่อนไหว
ฉันหวังว่าคุณจะพบว่าบทช่วยสอนนี้มีประโยชน์ อย่าลังเลที่จะแบ่งปันความคิดเห็นของคุณเกี่ยวกับเรื่องนี้
