文档章节

css3倒计时

一点灵犀
 一点灵犀
发布于 2016/12/10 20:55
字数 283
阅读 117
收藏 0
点赞 0
评论 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 启发。

© 著作权归作者所有

共有 人打赏支持
一点灵犀

一点灵犀

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

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

红薯 ⋅ 2011/11/28 ⋅ 8

华丽的HTML5/CSS3输入框聚焦发光动画表单

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

HTML5资源教程 ⋅ 2017/11/03 ⋅ 0

25 个新鲜和非常有用的 jQuery 插件

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

oschina ⋅ 2012/07/22 ⋅ 6

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

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

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

微信小程序特殊效果合集—左滑、气泡各种酷炫动画

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

anda0109 ⋅ 2017/08/08 ⋅ 0

2012 年最新的 12 款超棒 jQuery 插件

今天我们将分享12款精心挑选最新jQuery插件,包含了演讲,排序及其社交内容等等,很多插件在gbin1以前的jQuery文章中我们都介绍过,希望大家喜欢! 1. impress.js impress.js是一个基于css3过...

gbin1 ⋅ 2012/11/03 ⋅ 5

2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光 ⋅ 2012/02/24 ⋅ 0

10 月份热门的 jQuery 插件

今天,我们想和大家分享我们的新的手工制作的最令人印象深刻的jQuery插件的集合。这些插件,有的帮助您建立一个很好的幻灯展示、重新排列不同的块元素、显示各种社会化媒体的信息、建立一个图...

oschina ⋅ 2012/10/24 ⋅ 16

定时器应用

0x01定时器基础 本文属于定时器的应用部分,分别用于实现与时间相关的四个应用,包括时钟、倒计时、秒表和闹钟。与时间相关需要用到时间和日期对象Date,可自行查阅。 0x02时钟 最简单的时钟...

wt7315 ⋅ 01/30 ⋅ 0

CountDownTimer使用——android倒计时

相信大家在项目里面不少会用到倒计时操作吧,倒计时功能在我们业务开发中使用概率非常高,例如用户操作姿势错误,我们给一个提示,提示是带有倒计时的对话框,当然你会问为什么不直接用Toast...

Scus ⋅ 2017/11/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot整合模板引擎thymeleaf

项目结构 引入依赖pom.xml <!-- 引入 thymeleaf 模板依赖 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId......

yysue ⋅ 14分钟前 ⋅ 0

ConstraintLayout使用解析

AndroidStudio3.0创建Project默认的布局就是ConstraintLayout。 AndroidStudio3.0前的可以自己修改,使用ConstraintLayout。 为了要使用ConstraintLayout,我们需要在app/build.gradle文件中...

_OUTMAN_ ⋅ 25分钟前 ⋅ 0

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 59分钟前 ⋅ 9

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 今天 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部