文档章节

css3倒计时

一点灵犀
 一点灵犀
发布于 2016/12/10 20:55
字数 283
阅读 168
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
上一篇: 用CSS画一个圆形
下一篇: 水平动画两三事
一点灵犀

一点灵犀

粉丝 11
博文 53
码字总数 15777
作品 1
深圳
程序员
私信 提问
14 个使用 jQuery 开发的模拟、数字时钟

1. CoolClock in jQuery CoolClock 是一个可定制的 jQuery 模拟时钟,使用 SVG 绘制,提供多种外观选择,同时支持数字时钟。 Read More Demo 2.Analog JQuery clock 在该教程中,通过使用 jQ...

红薯
2011/11/28
12.5K
8
华丽的HTML5/CSS3输入框聚焦发光动画表单

华丽的HTML5/CSS3输入框聚焦发光动画表单 HTML5资源教程2017-11-038 阅读 css3聚焦表单html5输入框动画 今天我们要给大家分享一款非常特别的登录表单,基于 HTML5 和CSS3。当表单加载的时候,...

HTML5资源教程
2017/11/03
0
0
25 个新鲜和非常有用的 jQuery 插件

虽然我们经常发布这样的内容,但是里面列举的插件并不完全相同,能不能找到一些你感兴趣的插件才是最重要的:) 创建漂亮的密码强度指示器 TypeButter Growing Thumbnails Portfolio blur.j...

oschina
2012/07/22
5.4K
6
12款程序员们最爱的Bootstrap模板

如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一...

gbin1
2014/09/18
179
0
3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法 张鑫旭-鑫空间-鑫生活2017-11-061 阅读 clipfilterblur 上周我做了个demo,使用SVG实现了一个彩条圆环倒计时效果,使用SVG实现的优点是兼容性非...

张鑫旭-鑫空间-鑫生活
2017/11/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
12
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
14
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
18
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
昨天
11
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
昨天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部