html5+css3进度条倒计时动画特效代码【推荐】


Posted in HTML / CSS onMarch 08, 2016

html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5、javascript和css3技术,用到了svg、circle、text。。。

核心代码如下

复制代码
代码如下:

function alertSet(e) {
document.getElementById("js-alert-box").style.display = "block",
document.getElementById("js-alert-head").innerHTML = e;
var t = 10,
n = document.getElementById("js-sec-circle");
document.getElementById("js-sec-text").innerHTML = t,
setInterval(function() {
if (0 == t){
location.href="https://3water.com";
}else {
t -= 1,
document.getElementById("js-sec-text").innerHTML = t;
var e = Math.round(t / 10 * 735);
n.style.strokeDashoffset = e - 735
}
},
970);

效果如下:

html5+css3进度条倒计时动画特效代码【推荐】

以上这篇html5+css3进度条倒计时动画特效代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 #HTML / CSS
HTML5的新特性(1)
Mar 03 #HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 #HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 #HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 #HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 #HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 #HTML / CSS
You might like
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
js的写法基础分析
2011/01/17 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
python字符串连接方式汇总
2014/08/21 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
安全资金保障制度
2014/01/23 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
我爱我校演讲稿
2014/05/21 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
基于tensorflow权重文件的解读
2021/05/26 Python
详解JAVA的控制语句
2021/11/11 Java/Android
使用python求解迷宫问题的三种实现方法
2022/03/17 Python