สร้างปุ่มตัวเลือกภาพเคลื่อนไหวที่สนุกสนานด้วย Radiobox.css

ปุ่มตัวเลือกเริ่มต้นของ HTML5 ค่อนข้างน่าเบื่อ มีหลายวิธีที่จะ ปรับแต่งพวกเขา ใช้ CSS3 แต่เทคนิคส่วนใหญ่ เน้นเฉพาะรูปลักษณ์.

Radiobox.css เน้นไปที่ รูปลักษณ์ และ สไตล์ เพิ่มภาพเคลื่อนไหว CSS3 ที่กำหนดเองไปยังอินพุตวิทยุ.

ห้องสมุดนี้คือ ฟรีทั้งหมด และ โอเพ่นซอร์ส, พร้อมใช้งานบน GitHub เพื่อดาวน์โหลด ด้วยไลบรารี CSS นี้คุณสามารถเลือกจาก ภาพเคลื่อนไหวมากกว่า 12 แบบ ที่ใช้กับปุ่มตัวเลือก.

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

คุณสามารถติดตั้ง Radiobox ตรงจาก npm หรือ bower, หรือดาวน์โหลดไฟล์ในเครื่องของคุณ GitHub โฮสต์ไฟล์ทั้งหมดใน CDN ถ้าคุณต้องการเล่นโดยไม่ดาวน์โหลดอะไรเลย.

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

นี่คือ ข้อมูลโค้ด สำหรับ “โบอิ้ง” ผลกระทบ:

หมายเหตุ “โบอิ้ง” แอนิเมชั่นมี ไฟล์ CSS ของตัวเอง เรียกว่า boing.min.css. นี้ จะต้องมีการรวม หากคุณวางแผนที่จะใช้เอฟเฟกต์นั้นในหน้า.

เมื่อคุณดาวน์โหลด Radiobox คุณควร รับไดเรกทอรีสาธิต กับ การสาธิตสดสำหรับเอฟเฟกต์เหล่านี้ทั้งหมด. คุณทำได้ง่ายๆ คัดลอก / วางรหัส ตรงไปยังหน้าของคุณเพื่อให้มันทำงานได้อย่างราบรื่น.

สำหรับ เอกสารเต็มรูปแบบ, ตรวจสอบ ซื้อคืนหลัก พร้อมกับ เว็บไซต์สาธิตสด. หากคุณต้องการติดต่อผู้สร้างคุณสามารถส่งอีเมลจาก เว็บไซต์ 720kb หรือข้อความผ่าน Twitter @ 720kb_.