拆解使用純 CSS 做的碼表

難得看到一個簡單的純 CSS 卻含控制功能的網頁 Stopwatch in CSS, 分析了一下怎麼做到的, 才發覺 CSS 有許多神奇的語法:

顯示

1. 時分秒的內容一個由 00 ~ 59 共60個文字數字組成的長方形, 用 overflow:hidden + line height 只顯示第一列; 毫秒則是 00 ~ 99

2. 文字內容用 content 產生, 不用圖片的好處是可以用 CSS 做出更多微調 http://www.w3schools.com/cssref/pr_gen_content.asp

3. 設定 position: relative, 然後用 animation 控制 top offset。 各區塊用不同長度循環播放, 比方說秒是以 60s 為單位, 將60列文字用 60 步逐步往上捲出畫面 http://www.w3schools.com/css/css3_animations.asp

控制

1. 用 selector ":target" 改變 CSS 的屬性, 藉此控制 animation-play-state http://www.w3schools.com/cssref/sel_target.asp

#start:target 對到running, 其它 (包含預設) 對到 paused

在 CSS 中要做出點擊控制效果的關鍵可能就是 :target。由 URL 的 anchor 記錄狀態, 不同狀態提供不同 CSS 屬性, 就能切換不同畫面了。

2. stop 則是連結, 直接重新載入同一頁面