ตัวสร้างการเปลี่ยน 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

สร้างเลย์เอาต์ Flexbox ที่สมบูรณ์แบบ

แสดงภาพ ปรับแต่ง และสร้างโค้ดเฟล็กซ์บ็อกซ์ CSS ด้วยอินเทอร์เฟซแบบลากและวางที่ใช้งานง่ายของเรา

ตัวแปลงสไตลัสเป็น CSS

แปลงโค้ด SCSS ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย

ตัวแปลง SCSS เป็น CSS

แปลงโค้ด SCSS ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย

ตัวแปลงหน่วยอุณหภูมิ

แปลงระหว่างหน่วยอุณหภูมิต่างๆ ด้วยความแม่นยําสําหรับความต้องการทางวิทยาศาสตร์และในชีวิตประจําวันของคุณ

แปลงมุมด้วยความแม่นยํา

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

CMYK เป็น HSV

แปลงค่าสี CMYK เป็นแบบจําลองสี HSV สําหรับการใช้งานดิจิทัล