文档章节

css3倒计时

一点灵犀
 一点灵犀
发布于 2016/12/10 20:55
字数 283
阅读 150
收藏 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画一个圆形
下一篇: 水平动画两三事
一点灵犀

一点灵犀

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

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

红薯
2011/11/28
12.2K
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.3K
6
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

没有更多内容

加载失败,请刷新页面

加载更多

storm 环境搭建

1.下载解压 下载地址:http://storm.apache.org/downloads.html

MrPei
17分钟前
0
0
Python Base - 读写文件,字符串拼接,单引号

字符转义 读写文件cvs 字符串拼接,替换 import csvcsv_file_name = 'cardbin.csv'# insert into `card_bin_code` (name_of, code_of, card_no_prefix, bank_code) values ('中国银行......

园领T
19分钟前
0
0
基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%><div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">   <div style="width: 200px;height:20px; z-index: 20000; position: abs......

颖辉小居
19分钟前
0
0
springboot+kafka

1,首先springboot对kafka的支持也很好,同样是在配置文件中配置好参数,然后就可以直接使用。先说一下,很简单,,,不要怕 2,我用的依赖是 <dependency> <groupId>org.springframewor...

我真是小菜鸡
23分钟前
2
0
webservice动态客户端自我记录备份(spring boot)

动态客户端相比直接调用webservice的客户端代码要简单很多,但实际上很多工作是java自己替我们做掉了。简单记录一下内容,以备后续使用: pom文件只需要引入: <!-- CXF webservice --><de...

checkboxMan
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部