Đồng hồ số được tạo hoàn toàn chỉ bằng CSS

 (quaxio.com)
4 điểm bởi xguru 2021-01-02 | 1 bình luận | Chia sẻ qua WhatsApp

  • Đồng hồ số được tạo chỉ bằng CSS, không dùng cả JavaScript lẫn HTML

  • Phần giải thích nằm trong các chú thích của mã nguồn CSS

→ Bắt đầu từ 12:00:00

→ Biểu diễn màn hình 7 đoạn (LCD) bằng CSS Animation sử dụng Keyframe

  • Có thể thấy nhiều tinh chỉnh tương thích trình duyệt khác nhau để đạt được lượng mã tối thiểu

→ Chỉ cần thêm thẻ <link> là trình duyệt sẽ ngầm tạo <html>, <head>, <body>

→ Nếu không có content: "" thì ::before, ::after sẽ không hiển thị

→ Nếu không có display: block thì html, head, link sẽ không hiển thị

→ Nếu không chỉ định một đường viền vô hình như border: 1px solid #fff thì Safari sẽ không chạy animation

Bài viết liên quan

1 bình luận

 
kbumsik 2021-01-02

Nghe nói là hàng Thụy Sĩ, nhưng phần hiển thị phút trông không được gọn gàng lắm :)