ตัวสร้างการเปลี่ยน CSS3

การเปลี่ยนความทึบที่ราบรื่น

ค่าที่ตั้งไว้ล่วงหน้ายอดนิยม

เอฟเฟกต์จาง

การเปลี่ยนความทึบที่ราบรื่น

เอฟเฟกต์มาตราส่วน

ปรับขนาดองค์ประกอบเมื่อวางเมาส์เหนือ

เอฟเฟกต์หมุน

หมุนองค์ประกอบเมื่อวางเมาส์เหนือ

เอฟเฟกต์สไลด์

ย้ายตําแหน่งองค์ประกอบ

เปลี่ยนสี

การเปลี่ยนสีพื้นหลัง

เกี่ยวกับการเปลี่ยนภาพ

การเปลี่ยน CSS ช่วยให้คุณเปลี่ยนค่าคุณสมบัติได้อย่างราบรื่นในช่วงเวลาที่กําหนด

คุณสมบัติภาพเคลื่อนไหวทั่วไป ได้แก่ :

  • ความกว้างความสูง
  • ระยะขอบ, ช่องว่างภายใน
  • ความทึบ, สี
  • transform (scale, rotate, translate)
  • background-color

เคล็ดลับสําหรับมือโปร: ใช้ตัวเลือก 'คุณสมบัติทั้งหมด' เพื่อทําให้การเปลี่ยนแปลงทั้งหมดเคลื่อนไหว

Preview

HOVER ME

รหัสที่สร้างขึ้น

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

การควบคุมการเปลี่ยนผ่าน

300
0

เอฟเฟกต์โฮเวอร์

100%
100%
0px
0px
8px
8px

Related Tools