ตัวสร้างคีย์เฟรมแอนิเมชัน CSS

กรอกพรอมต์นี้

สร้างแอนิเมชันคีย์เฟรม CSS แบบกำหนดเองสำหรับองค์ประกอบ UI.

Software Development Design & Art

เทมเพลตพรอมต์

Create CSS `@keyframes` and the corresponding utility class for a {{Animation Style: Fade, Slide, Bounce, Spin, Pulse}} animation. The animation should have a duration of {{Duration in Seconds:1-10}} seconds, run {{Iteration Count: Infinite, 1, 2, 3}} times, and use a {{Timing Function: ease-in-out, linear, ease-in, cubic-bezier}}. Provide the code for animating a {{Element: e.g. Puco UI call-to-action button}}.

คู่มือพรอมต์

เหมาะสำหรับ

  • เริ่มจากพรอมต์ที่มีโครงสร้างและใช้ซ้ำได้ แทนที่จะเป็นแชทเปล่า
  • ปรับพรอมต์ให้เข้ากับข้อมูลของคุณ โดยยังคงเจตนาเดิมไว้
  • เวิร์กโฟลว์ที่เกี่ยวข้องกับ Software Development, Design & Art

วิธีใช้งาน

  1. คัดลอกเทมเพลตพรอมต์ฉบับเต็ม
  2. แทนที่ตัวแปรแต่ละตัวด้วยบริบทของคุณ หรือเลือกจากตัวเลือกที่แนะนำ
  3. วางพรอมต์ที่กรอกเสร็จลงใน ChatGPT, Claude, Gemini หรือผู้ช่วย AI อื่น ๆ

ตัวแปรในพรอมต์นี้

Animation Style

Fade, Slide, Bounce, Spin, Pulse

Duration in Seconds

1-10

Iteration Count

Infinite, 1, 2, 3

Timing Function

ease-in-out, linear, ease-in, cubic-bezier

Element

e.g. Puco UI call-to-action button

ตัวอย่างจุดเริ่มต้น

Create CSS `@keyframes` and the corresponding utility class for a Fade animation. The animation should have a duration of 1-10 seconds, run Infinite times, and use a ease-in-out. Provide the code for animating a e.g. Puco UI call-to-action button.

ตัวแปรทำงานอย่างไร

ไวยากรณ์ตัวแปร

ตัวแปรจะอยู่ภายใน {{ และ }} และเป็นไปตามรูปแบบนี้:

{{variable name: option1, option2, option3 }}

ตัวแปรที่กำหนดไว้ล่วงหน้า

ตัวเลือกสามารถอ้างอิงรายการตัวแปรที่กำหนดไว้ล่วงหน้าโดยใช้วงเล็บเหลี่ยม ตัวเลือกเหล่านี้จะแสดงเป็น[สีส้ม]และให้ค่าที่ใช้บ่อย เช่น สี โทน หรือภาษา

{{Tone: [tones] }}

รายการตัวเลือกที่กำหนดเอง

คุณยังสามารถระบุรายการตัวเลือกแบบอินไลน์ โดยคั่นด้วยเครื่องหมายจุลภาคได้

{{Format: bullet points, paragraphs, numbered list }}
💡

เคล็ดลับ: คุณไม่จำเป็นต้องใช้แอป PUCO เพื่อใช้พรอมต์เหล่านี้! เพียงคัดลอกเทมเพลตและแทนที่แต่ละส่วน {{…}} ด้วยข้อความของคุณเองโดยตรงใน ChatGPT, Claude, Gemini หรือผู้ช่วย AI อื่น ๆ

ใช้พรอมต์นี้ได้ในไม่กี่วินาที ไม่ใช่เป็นนาที

ติดตั้ง PUCO สำหรับ Mac: กดคีย์ลัดในแอปใดก็ได้ กรอกฟอร์มอัจฉริยะ แล้ววางลงใน ChatGPT, Claude หรือ Gemini ทุกตัวแปรจะกลายเป็นเมนูแบบเลื่อนลงที่คัดสรรมาแล้ว และระบบจะจดจำค่าล่าสุดของคุณ

ดาวน์โหลดบน Mac App Store