กำหนดเอฟเฟกต์ภาพเคลื่อนไหว Checkbox ของคุณเองด้วย Checkbox.css

ในโพสต์เมื่อเร็ว ๆ นี้ฉันได้รวบรวมไลบรารี่แอนิเมชั่นที่สนุกสนานสำหรับปุ่มตัวเลือกที่กำหนดเอง, ขับเคลื่อนโดย CSS.

ห้องสมุดฟรีนั้นเปิดตัวโดย 720kb และเห็นอย่างรวดเร็ว ทางเลือกการติดตามที่เรียกว่า Checkbox.css. วิธีนี้ใช้งานได้ในลักษณะเดียวกันยกเว้น restyles และเคลื่อนไหวช่องทำเครื่องหมาย HTML.

ห้องสมุดนี้มาพร้อมกับชุดของห้องสมุดด้วย วัตถุประสงค์ที่แตกต่างกันสามประการ:

1. Radiobox.css - ภาพเคลื่อนไหววิทยุที่กำหนดเอง
2. Checkbox.css - ภาพเคลื่อนไหวช่องทำเครื่องหมายที่กำหนดเอง
3. Checked.css - สไตล์และภาพเคลื่อนไหวองค์ประกอบที่เลือกอยู่ (วิทยุและช่องทำเครื่องหมาย)

ทั้งหมดนี้พัฒนาโดยทีมงานเดียวกันและทำงานในลักษณะเดียวกัน แต่คุณจะต้อง รวมแต่ละห้องสมุดเป็นรายบุคคล ถ้าคุณต้องการได้รับผลเต็มรูปแบบ.

ดูที่ Checkbox.css GitHub เพื่อดูคุณสมบัติเหล่านี้บางอย่างและวิธีการทำงาน โดยค่าเริ่มต้นพวกเขาพึ่งพา 2D แปลงพร้อมกับการเปลี่ยน CSS, ขึ้นอยู่กับการรองรับเบราว์เซอร์.

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

กระบวนการนี้ไม่สามารถทำได้ง่ายและเป็นเช่นนั้น ต้องใช้ความรู้การเขียนโปรแกรมเล็กน้อยถึงไม่มีเลย (แม้ว่าจะมีประโยชน์เสมอที่จะมีบางอย่าง).

เมื่อสไตล์ชีท CSS อยู่ในหน้าของคุณเพียงเพิ่มคลาสในกล่องกาเครื่องหมายของคุณด้วยรูปแบบ ช่องทำเครื่องหมาย x- ที่ไหน “x” แสดงถึงภาพเคลื่อนไหวสิ่งที่คุณต้องการ. ตัวอย่างเช่นนี่คือรหัสสำหรับ “กระโดด” ผลภาพเคลื่อนไหว:

ส่วนที่ดีที่สุดคือวิธีที่ห้องสมุดนี้สามารถทำได้ ทำงานร่วมกับรูปแบบปุ่มแบบเรดิโอ, เกินไป. ฉันจะแนะนำห้องสมุด Checked.css แน่นอนถ้าคุณต้องการ เคลื่อนไหวองค์ประกอบที่เลือกที่มีอยู่.

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

และหากคุณมีคำถามหรือคำแนะนำสำหรับไลบรารีภาพเคลื่อนไหวชุดข้อมูลนี้ให้ลองส่งข้อความถึงผู้สร้างผ่านเว็บไซต์หรือ Twitter @ 720kb_.