文档章节

css3倒计时

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

码上生花,ECharts 作品展示赛正式启动!>>>

倒计时很常见,完全不用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画一个圆形
下一篇: 水平动画两三事
一点灵犀

一点灵犀

粉丝 12
博文 53
码字总数 15777
作品 1
深圳
程序员
私信 提问
加载中
请先登录后再评论。
14 个使用 jQuery 开发的模拟、数字时钟

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

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

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

HTML5资源教程
2017/11/03
0
0
12款程序员们最爱的Bootstrap模板

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

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

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

张鑫旭-鑫空间-鑫生活
2017/11/06
0
0
微信小程序特殊效果合集—左滑、气泡各种酷炫动画

微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法。下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考。 1、文字跑马灯效果:htt...

anda0109
2017/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Beta冲刺--Day2

2020/05/29 这个作业属于哪个课程 2020春S班软件工程实践 这个作业要求在哪里 团队作业第六次——beta冲刺+事后诸葛亮 团队名称 云玩家$ 这个作业的目标 beta冲刺,测试和完善已有的项目 作业...

osc_taer599u
48分钟前
15
0
题解 [SDOI2010]猪国杀

题目链接 代码成功卡到600行以内 曾经发誓一天切掉的我打了两周。。。 先看题 要点还是挺多的,即使是像我这样熟悉三国杀的同(wán)学( jiā),也要认真看。 首先是基本牌的部分。 杀:在...

osc_4p2c0ecc
50分钟前
17
0
Beta冲刺--Day3

2020/05/30 这个作业属于哪个课程 2020春S班软件工程实践 这个作业要求在哪里 团队作业第六次——beta冲刺+事后诸葛亮 团队名称 云玩家$ 这个作业的目标 beta冲刺,测试和完善已有的项目 作业...

osc_sejhgcp0
52分钟前
23
0
vue3.0提前了解系列----一些普通用法和api的使用

今天给大家说说vue3.0 composition api里面一些剩余的普通api的使用 provide & inject provide和inject用于在一些高阶组件中常用,在2.x中也有一样的api那么在compositionapi中怎么用呢? 仅...

osc_kvcz9ju6
53分钟前
5
0
Beta冲刺--Day4

2020/05/31 这个作业属于哪个课程 2020春S班软件工程实践 这个作业要求在哪里 团队作业第六次——beta冲刺+事后诸葛亮 团队名称 云玩家$ 这个作业的目标 beta冲刺,测试和完善已有的项目 作业...

osc_ze3jj3wd
54分钟前
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部