css3倒计时
css3倒计时
一点灵犀 发表于10个月前
css3倒计时
  • 发表于 10个月前
  • 阅读 63
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 利用css3动画+content属性实现无图片无js倒计时效果

倒计时很常见,完全不用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 启发。

共有 人打赏支持
一点灵犀
粉丝 10
博文 49
码字总数 14246
作品 1
×
一点灵犀
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: