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样式linear-gradient的使用实例
Jan 16 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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开发中的错误收集,不定期更新。
2011/02/03 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
jQuery设计思想
2017/03/07 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
使用python实现名片管理系统
2020/06/18 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python中time、datetime模块的使用
2020/12/14 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
生产部管理制度
2014/01/31 职场文书
大学生活自我评价
2014/04/09 职场文书
期末评语大全
2014/05/04 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript