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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
JS实现php的伪分页
2008/05/25 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
nodejs教程之入门
2014/11/21 NodeJs
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
聊聊Python中的pypy
2018/01/12 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python @property及getter setter原理详解
2020/03/31 Python
使用Pycharm分段执行代码
2020/04/15 Python
python实现定时发送邮件
2020/12/23 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
个人简历自我评价范文
2014/02/04 职场文书
语文教学感言
2014/02/06 职场文书
标准化管理实施方案
2014/02/25 职场文书
投资合作协议书范本
2014/04/17 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS