ภาพเคลื่อนไหวในหน้าเว็บสามารถดึงดูดผู้ใช้ได้มากขึ้น ถามตัวเองว่าถ้าคุณเห็นหน้าเว็บที่มีภาพเคลื่อนไหวค่อนข้างน้อยคุณไม่ต้องการสำรวจเพิ่มเติมหรือ? ตอนนี้ด้วยการเปลี่ยน CSS คุณสามารถทำให้งานของคุณมีชีวิตชีวาด้วยภาพเคลื่อนไหวที่ยอดเยี่ยม และจำไว้ว่าสิ่งเหล่านี้ต้องทำให้ถูกต้อง มาสำรวจโลกของการเปลี่ยน CSS ตามลำดับต่อไปนี้:
- ทำไมต้องเปลี่ยน CSS
- คุณสมบัติการเปลี่ยนแปลง
- คุณต้องระบุอะไร?
- คุณสมบัติฟังก์ชันฟังก์ชันการเปลี่ยนเวลา
- ทรัพย์สินที่ล่าช้าในการเปลี่ยนแปลง
ทำไมต้องเปลี่ยน CSS
มาดูตัวอย่างกัน หากคุณต้องการเปลี่ยนสีขององค์ประกอบจากสีขาวเป็นสีน้ำเงินการเปลี่ยนแปลงนี้แทบจะเกิดขึ้นในทันที เพื่อให้เอฟเฟกต์เคลื่อนไหวมากขึ้นคุณสามารถทำให้การเปลี่ยนแปลงนี้ค่อยๆเกิดขึ้นได้ มันดูดึงดูดสายตามากเช่นกัน ด้วยการเปิดใช้การเปลี่ยน CSS คุณสามารถปรับแต่งวิธีการเปลี่ยนแปลงที่เกิดขึ้นได้ คุณสามารถกำหนดว่าการเปลี่ยนแปลงในองค์ประกอบเกิดขึ้นในช่วงเวลาใดช่วงหนึ่งซึ่งเป็นไปตามเส้นโค้งการเร่ง
การเปลี่ยน CSS ช่วยให้คุณกำหนดการเปลี่ยนแปลงสำหรับ องค์ประกอบช่วงเวลาที่เฉพาะเจาะจงความเร็วของเส้นโค้งการเร่งความเร็วและอื่น ๆ อีกมากมาย คุณสามารถทำทั้งหมดนี้ได้โดยไม่ต้องใช้ Flash หรือ JavaScript .
เพื่อความเข้าใจที่ดีขึ้นคุณสามารถดูภาพด้านล่าง:
ในภาพด้านบนองค์ประกอบ HTML จะเปลี่ยนจากสีแดงเป็นสีน้ำเงินภายในเวลาไม่กี่วินาที นอกจากนี้คุณจะเห็นสีกลางเมื่อเกิดการเปลี่ยนแปลง หากคุณไม่ได้ใช้การเปลี่ยน CSS คุณจะสังเกตเห็นว่าการเปลี่ยนสีจากสีแดงเป็นสีน้ำเงินนั้นเกิดขึ้นทันทีคุณจะไม่เห็นสีกลาง ด้วยการเปลี่ยน CSS คุณจะสังเกตเห็นเอฟเฟกต์แบบเคลื่อนไหวเมื่อองค์ประกอบ HTML กำลังเปลี่ยนจากสถานะเก่าไปเป็นแบบใหม่
คุณสมบัติการเปลี่ยนแปลง
คุณสามารถใช้คุณสมบัติการเปลี่ยนชวเลขเพื่อควบคุมการเปลี่ยน CSS การใช้ชวเลขนี้ไม่เพียง แต่ง่าย แต่ยังสามารถหลีกเลี่ยงพารามิเตอร์ที่ไม่ซิงค์ซึ่งอาจทำให้การดีบักใน CSS น่าหงุดหงิดได้อีกด้วย
คุณสมบัติการเปลี่ยนระบุคุณสมบัติ CSS ที่คุณต้องการให้เอฟเฟกต์การเปลี่ยนแปลง คุณสมบัติ CSS เหล่านี้เท่านั้นที่เป็นภาพเคลื่อนไหว
ไวยากรณ์:
การเปลี่ยนแปลง:
ในฐานะผู้เริ่มต้นคุณอาจประสบปัญหาในการใช้ชวเลข หากคุณคิดว่าการใช้ชวเลขนั้นซับซ้อนสำหรับคุณในตอนนี้คุณสามารถระบุคุณสมบัติการเปลี่ยนแยกกันได้ สำหรับองค์ประกอบ HTML คุณสามารถระบุคุณสมบัติการเปลี่ยนแปลงทีละรายการดังที่แสดงในตัวอย่างด้านล่าง:
ความแตกต่างระหว่าง java และ c ++ คืออะไร
div {width: 100px height: 100px background: lightblue transition-property: width transition-duration: 2s transition-timing-function: linear transition-delay: 1s} div: hover {width: 300px}วางเมาส์เหนือกล่อง
ในตัวอย่างข้างต้นเราได้ระบุคุณสมบัติ (คุณสมบัติการเปลี่ยนแปลง, ระยะเวลาการเปลี่ยนแปลง, การเปลี่ยนเวลา - ฟังก์ชันและการหน่วงเวลาการเปลี่ยนแปลง) และค่าของคุณสมบัติเหล่านั้นแยกกัน เราจะเรียนรู้เกี่ยวกับคุณสมบัติการเปลี่ยนแปลงเหล่านี้ในไม่ช้า
คุณต้องระบุอะไร?
มีสองสิ่งหลักที่คุณต้องระบุเพื่อสร้างการเปลี่ยน CSS: คุณสมบัติ CSS ที่ต้องการเพิ่มเอฟเฟกต์และระยะเวลาของเอฟเฟกต์นั้นคุณต้องคำนึงถึงสิ่งหนึ่ง - เมื่อคุณไม่ได้ระบุระยะเวลาการเปลี่ยนแปลงจะใช้ค่าเริ่มต้นเป็น 0 และจะไม่มีผลใด ๆ
ลองพิจารณาตัวอย่าง:
โค้ดด้านล่างกำหนดเอฟเฟกต์การเปลี่ยนแปลงของคุณสมบัติความกว้างเป็นระยะเวลาห้าวินาที
div {width: 100px height: 100px background: blue transition: width 5s} div: hover {width: 600px}เลื่อนเคอร์เซอร์ไปที่องค์ประกอบ div ด้านบนเพื่อดูผลการเปลี่ยนแปลง
ในโค้ดด้านบนคุณจะเห็นว่าเมื่อคุณวางเคอร์เซอร์ไว้เหนือกล่องสีน้ำเงินกล่องสีน้ำเงินจะเพิ่มความกว้างทีละน้อยเป็นระยะเวลาห้าวินาที นอกจากนี้คุณจะสังเกตเห็นว่าเมื่อคุณนำเคอร์เซอร์ออกจากกล่องสีน้ำเงินกล่องสีน้ำเงินจะกลับสู่ขนาดเดิมทีละน้อย (ไม่ใช่ในทันที) คุณยังสามารถเปลี่ยนค่าสำหรับความกว้างและระยะเวลาเพื่อดูว่าคุณสมบัติการเปลี่ยนแปลงนี้ส่งผลต่อองค์ประกอบ HTML อย่างไร
คุณยังสามารถเพิ่มเอฟเฟกต์การเปลี่ยนแปลงให้กับพร็อพเพอร์ตี้ได้มากกว่าหนึ่งรายการ คุณสามารถทำได้โดยใช้ลูกน้ำเพื่อแยกคุณสมบัติ ลองพิจารณาตัวอย่าง:
ในโค้ดด้านล่างคุณสมบัติการเปลี่ยนถูกระบุสำหรับความกว้างความสูงและการแปลง
div {padding: 15px width: 150px height: 100px background: green transition: width 2s, height 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotation (360deg)} สวัสดีชาวโลก (วางเมาส์เหนือฉัน)
จากตัวอย่างด้านบนคุณจะเห็นว่ากล่องสีเขียวเคลื่อนไหวอย่างไรเมื่อคุณวางเมาส์เหนือกล่อง
เพิ่มพลังให้กับ java
เราได้ระบุคุณสมบัติและระยะเวลาไว้เท่านั้น มาดูพารามิเตอร์อื่น ๆ พร้อมตัวอย่างต่างๆ
คุณสมบัติฟังก์ชันฟังก์ชันการเปลี่ยนเวลา
คุณสมบัตินี้กำหนดเส้นโค้งความเร็วสำหรับผลการเปลี่ยนแปลง สามารถรับค่าต่อไปนี้:
- ค่าความง่าย: นี่คือค่าเริ่มต้นที่เอฟเฟกต์ช้าในช่วงเริ่มต้นจากนั้นเร็วขึ้นและจบลงอย่างช้าๆ
- ค่าเชิงเส้น: เอฟเฟกต์นี้ไม่ได้เปลี่ยนแปลงความเร็วของการเปลี่ยน แต่จะรักษาความเร็วให้คงที่ตั้งแต่ต้นจนจบ
- ค่าความง่าย: เอฟเฟกต์นี้เริ่มต้นอย่างช้าๆ
- ค่าความง่าย: ผลกระทบนี้มีจุดจบที่ช้า
- ค่าเข้า - ออกง่าย: ผลกระทบนี้มีการเริ่มต้นช้าและสิ้นสุดช้า
- Cubic-bezier ค่า (n, n, n, n): คุณสามารถระบุชุดค่าของคุณเองในฟังก์ชันคิวบิกเบซิเอร์
โค้ดด้านล่างนี้แสดงเอฟเฟกต์การเปลี่ยนสำหรับค่าเชิงเส้นความง่ายความสะดวกในการคลายออกและความง่ายในการเข้าออก
div {width: 100px height: 100px background: pink transition: width 2s} # div1 {transition-timing-function: linear} # div2 {transition-timing-function: ease} # div3 { } # div4 {ทรานซิชั่นไทม์มิ่งฟังก์ชัน: ความง่าย - ออก} # div5 {ทรานซิชั่นไทม์มิ่งฟังก์ชัน: ความสะดวกในการออก} div: โฮเวอร์ {width: 300px}วางเมาส์เหนือองค์ประกอบ div ด้านล่าง
เชิงเส้น
ความสะดวก
สะดวกใน
ง่ายออก
สะดวกในการเข้า - ออก
ทรัพย์สินที่ล่าช้าในการเปลี่ยนแปลง
บางครั้งคุณต้องการให้ภาพเคลื่อนไหวเกิดขึ้นหลังจากช่วงเวลาหนึ่ง คุณสมบัติการหน่วงเวลาการเปลี่ยนแปลงช่วยให้คุณระบุความล่าช้าสำหรับเอฟเฟกต์การเปลี่ยนแปลง คุณสามารถระบุความล่าช้าเป็นวินาที
ตัวอย่างเนมสเปซ c ++
เรามาดูตัวอย่างเพื่อดูความล่าช้าในผลการเปลี่ยนแปลง:
div {width: 100px height: 100px background: yellow transition: width 3s transition-delay: 1s} div: hover {width: 300px}วางเมาส์เหนือองค์ประกอบ div ด้านล่าง
บันทึก: คุณสามารถสังเกตได้ว่าหน่วงเวลา 1 วินาทีก่อนที่เอฟเฟกต์จะเริ่ม
ในโค้ดด้านบนเมื่อคุณวางเคอร์เซอร์เหนือกล่องสีเหลืองคุณจะสังเกตเห็นว่าไม่มีผลใด ๆ (เป็นเวลาหนึ่งวินาที) หลังจากรอหนึ่งวินาทีคุณจะสังเกตเห็นผลกระทบ
ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความการเปลี่ยน CSS นี้ คุณสามารถเพิ่มภาพเคลื่อนไหวลงในหน้าเว็บของคุณได้แล้ว ลองดูตัวอย่างเหล่านี้
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'CSS Transition' แล้วเราจะติดต่อกลับไป