倒计时很常见,完全不用js是不行的,这里想说的只是针对毫秒的纯css倒计时效果。
演示如上。最后一个数值位,不断的从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上的这条评论