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

ตัวย่อขนาด CSS

บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ของคุณด้วยความแม่นยําระดับมืออาชีพ

สร้างการแปลง CSS3 ได้อย่างง่ายดาย

เครื่องมือที่ทรงพลังและใช้งานง่ายสําหรับการสร้างการแปลง CSS3 ที่ซับซ้อนโดยไม่ต้องเขียนโค้ด แสดงภาพการเปลี่ยนแปลงแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้นเพื่อใช้ในโครงการของคุณ

Less to CSS Converter

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

เครื่องมือเข้ารหัส URL

เข้ารหัสพารามิเตอร์ URL อย่างง่ายดายในเบราว์เซอร์ของคุณ

JavaScript Obfuscator

ปกป้องโค้ด JavaScript ของคุณจากการเข้าถึงโดยไม่ได้รับอนุญาตและวิศวกรรมย้อนกลับด้วยเครื่องมือสร้างความสับสนอันทรงพลังของเรา แปลงโค้ดของคุณให้เป็นรูปแบบที่อ่านไม่ได้ในขณะที่ยังคงฟังก์ชันการทํางานเต็มรูปแบบ

ฐานสิบหกเป็นทศนิยม

แปลงเลขฐานสิบหกเป็นทศนิยมอย่างง่ายดาย