css3倒計時 原

倒計時很常見，完全不用js是不行的，這裏想說的只是針對毫秒的純css倒計時效果。

http://sandbox.runjs.cn/show/duazbiss

演示如上。最後一個數值位，不斷的從0~9循環，這是一個純css3動畫，通過修改content的值實現的。

@keyframes clock10 {
	0%,100% {content: '0'}
	10% {content: '9'}
	20% {content: '8'}
	30% {content: '7'}
	40% {content: '6'}
	50% {content: '5'; color: black;}
	60% {content: '4'}
	70% {content: '3'}
	80% {content: '2'}
	90% {content: '1'}
}

animation: clock10 1s linear infinite;

經測試，在安卓自帶瀏覽器和chrome，可以正常運行。但是在火狐、iOS和webview裏，均不會出現倒數效果。然而動畫確實是執行了的，以上的color: black便是用於對比驗證。

根據標準，css被認爲是不應當（不適合）修改html內容，不過標準也在變化，例如Chrome就在做這方面的嘗試。如果可行可靠，這種能力可能會在不遠的將來被納入標準！ 參見css-tricks上的這條評論

本文受 http://codepen.io/robinrendle/pen/wKqmbW 啓發。