เครื่องมือสำหรับนักพัฒนาฟรี

ภาพเคลื่อนไหว CSS ช่างก่อสร้าง

สร้างภาพเคลื่อนไหวคีย์เฟรม CSS ด้วยสายตา ดูตัวอย่างภาพเคลื่อนไหวแบบเรียลไทม์และคัดลอกโค้ด CSS ที่สร้างขึ้นทันที

ดูตัวอย่าง

ระยะเวลา2s

การวนซ้ำ

ฟังก์ชั่นจับเวลา

ทิศทาง

Keyframes

แปลX (px)

แปล Y (px)

หมุน (องศา)

ขนาด

ความทึบ

สี

แปลX (px)

แปล Y (px)

หมุน (องศา)

ขนาด

ความทึบ

สี

แปลX (px)

แปล Y (px)

หมุน (องศา)

ขนาด

ความทึบ

สี

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

เกี่ยวกับเครื่องมือนี้

สร้างและปรับแต่งเนื้อหาด้วย Css Animation Builder ได้โดยตรงในเบราว์เซอร์ของคุณ กำหนดการตั้งค่าของคุณ สร้างเอาต์พุต และดาวน์โหลดหรือคัดลอกผลลัพธ์ ทุกอย่างทำงานฝั่งไคลเอ็นต์ — ข้อมูลของคุณยังคงเป็นส่วนตัวและประมวลผลได้ทันที

วิธีใช้งาน

กำหนดการตั้งค่าและตัวเลือกให้ตรงกับความต้องการของคุณ

คลิกสร้างเพื่อสร้างเอาต์พุตของคุณ

ดูตัวอย่างผลลัพธ์และทำการปรับเปลี่ยนหากจำเป็น

ดาวน์โหลดไฟล์เอาต์พุตหรือคัดลอกไปยังคลิปบอร์ดของคุณ

คำถามที่พบบ่อย

ฉันสามารถปรับแต่งเอาต์พุตที่สร้างขึ้นได้หรือไม่

ใช่. เครื่องมือนี้มีตัวเลือกการปรับแต่งที่หลากหลายเพื่อปรับแต่งผลลัพธ์ให้ตรงตามความต้องการเฉพาะของคุณ ปรับการตั้งค่าก่อนสร้างหรือสร้างใหม่ด้วยตัวเลือกต่างๆ

เนื้อหาที่สร้างขึ้นใช้งานได้ฟรีหรือไม่?

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

สิ่งนี้จำเป็นต้องมีบัญชีหรือไม่?

ไม่ เครื่องมือนี้พร้อมใช้งานทันทีโดยไม่ต้องสมัคร ไม่มีอีเมล และไม่ต้องลงทะเบียน เพียงเปิดหน้าและเริ่มสร้าง

ข้อมูลอินพุตของฉันถูกเก็บไว้เป็นส่วนตัวหรือไม่?

ใช่. การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลอินพุตและเอาต์พุตที่สร้างขึ้นจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอกใดๆ

ภาพเคลื่อนไหว CSS ช่างก่อสร้าง

ดูตัวอย่าง

Keyframes

Generated CSS

เครื่องมือที่เกี่ยวข้อง

ซีเอสเอส เครื่องย่อส่วน

CSS เฟล็กซ์บ็อกซ์ เครื่องกำเนิดเค้าโครง

CSS กริด เครื่องกำเนิดเค้าโครง

การไล่ระดับสี CSS เครื่องกำเนิดไฟฟ้า

เกี่ยวกับเครื่องมือนี้

วิธีใช้งาน

คำถามที่พบบ่อย

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk