นาฬิกาดิจิทัลที่สร้างด้วย CSS เพียงอย่างเดียว
(quaxio.com)-
นาฬิกาดิจิทัลที่สร้างด้วย CSS อย่างเดียว โดยไม่มีทั้ง JavaScript และ HTML
-
คำอธิบายอยู่ในคอมเมนต์ของซอร์ส CSS
→ เริ่มต้นจาก 12:00:00
→ แสดงผลจอ 7-segment (LCD) ด้วย CSS Animation โดยใช้ Keyframe
- สามารถเห็นเทคนิคปรับแต่งสำหรับเบราว์เซอร์ต่าง ๆ เพื่อให้ใช้โค้ดน้อยที่สุด
→ แค่ใส่แท็ก <link> เบราว์เซอร์ก็จะสร้าง <html>, <head>, <body> ขึ้นมาโดยปริยาย
→ ถ้าไม่มี content: "" ก็จะไม่เห็น ::before, ::after
→ ถ้าไม่มี display: block ก็จะไม่เห็น html, head, link
→ ถ้าไม่กำหนดเส้นขอบที่มองไม่เห็นอย่าง border: 1px solid #fff Safari จะไม่เล่นแอนิเมชัน
1 ความคิดเห็น
เขาว่าผลิตในสวิตเซอร์แลนด์ แต่การแสดงนาทีก็ไม่ได้ดูเรียบร้อยนักนะ :)