บทช่วยสอน เปลี่ยน CSS3 ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ เปลี่ยน CSS3,สนับสนุนเบราว์เซอร์,มันทำงานอย่างไร?,ตัวอย่าง,ตัวอย่าง,จำนวนของการเปลี่ยนแปลง,ตัวอย่าง,คุณสมบัติการเปลี่ยน,ตัวอย่าง,ตัวอย่าง,
CSS3 เราต้องเพิ่มผลที่สามารถแปลงจากรูปแบบหนึ่งไปยังอีกครั้งโดยไม่ต้องใช้ภาพเคลื่อนไหว Flash หรือจาวาสคริปต์ เลื่อนเมาส์ไปที่องค์ประกอบต่อไปนี้:
เลื่อนเมาส์ไปที่องค์ประกอบต่อไปนี้:
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
属性 | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
การเปลี่ยนแปลง CSS3 เป็นองค์ประกอบค่อยๆเปลี่ยนจากรูปแบบหนึ่งที่มีผลอีก
เพื่อให้บรรลุนี้สองสิ่งที่ต้องมีการกำหนด:
แอตทริบิวต์ความกว้างใช้ผลการเปลี่ยนแปลงระยะเวลา 2 วินาที:
หมายเหตุ: หากคุณไม่ได้ระบุระยะเวลาการเปลี่ยนแปลงจะไม่มีผลกระทบเพราะค่าเริ่มต้นคือ 0
ผลจะเปลี่ยนค่าของการเปลี่ยนแปลงที่ระบุคุณสมบัติ CSS ที่ การเปลี่ยนแปลงคุณสมบัติ CSS ทั่วไปคือเมาส์ผู้ใช้มากกว่าองค์ประกอบ:
บทบัญญัติเมื่อระงับชี้เมาส์ (: โฉบ) ที่ <div> เมื่อ:
หมายเหตุ: เมื่อเคอร์เซอร์ของเมาส์ไปยังองค์ประกอบก็ค่อยๆเปลี่ยนรูปแบบเดิม
หากต้องการเพิ่มมากกว่าหนึ่งผลของรูปแบบการเปลี่ยนแปลงเพิ่มแอตทริบิวต์คั่นด้วยเครื่องหมายจุลภาค:
เพิ่มผลกระทบความกว้างความสูงและการเปลี่ยนแปลง:
ตารางต่อไปนี้แสดงคุณสมบัติการเปลี่ยนแปลง:
คุณสมบัติ | ลักษณะ | CSS |
---|---|---|
การเปลี่ยนแปลง | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าคุณสมบัติที่สี่การเปลี่ยนแปลงในสถานที่ให้บริการ | 3 |
สถานที่ให้บริการการเปลี่ยนแปลง | ชื่อของ CSS คุณสมบัติบทบัญญัติเปลี่ยนแปลงมีผลบังคับใช้ | 3 |
การเปลี่ยนแปลงระยะเวลา | เพื่อกำหนดเวลาผลการเปลี่ยนแปลงที่ใช้ เริ่มต้นเป็น 0 | 3 |
การเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่น | ที่กำหนดไว้เปลี่ยนแปลงโค้งเวลามีผลบังคับใช้ ค่าเริ่มต้นคือ "ความสะดวก" | 3 |
การเปลี่ยนแปลงความล่าช้า | บทบัญญัติเมื่อเริ่มต้นผลการเปลี่ยนแปลง เริ่มต้นเป็น 0 | 3 |
สองตัวอย่างต่อไปตั้งค่าคุณสมบัติการเปลี่ยนแปลงทั้งหมด:
ใช้คุณสมบัติการเปลี่ยนแปลงในตัวอย่างที่หนึ่ง:
และตัวอย่างของผลกระทบการเปลี่ยนแปลงเดียวกันข้างต้น แต่ใช้คุณสมบัติการเปลี่ยนชวเลข: