純粋にCSSだけで作ったデジタル時計

 (quaxio.com)
4 ポイント 投稿者 xguru 2021-01-02 | 1件のコメント | WhatsAppで共有

  • JavaScriptやHTMLも使わず、CSSだけで作ったデジタル時計

  • 説明はCSSソースのコメント内に記載

→ 12:00:00 から開始

→ Keyframeを使ったCSS Animationで7セグメント表示装置（LCD）を表現

  • 最小限のコードのための、さまざまなブラウザ向けテクニックを見られる

→ <link> タグだけを入れても、ブラウザが <html>、<head>、<body> を暗黙的に生成

→ content: "" がないと ::before、::after は表示されない

→ display: block がないと html、head、link は表示されない

→ border: 1px solid #fff のように見えないボーダーを指定しないと、Safariはアニメーションしない

関連記事

1件のコメント

 
kbumsik 2021-01-02

スイス製らしいですが、分表示はあまりすっきりしていませんね :)