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盒子模型详解
Apr 24 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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程序时遇到的三个问题
2012/01/17 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python查询sqlite数据表的方法
2015/05/08 Python
python生成器generator用法实例分析
2015/06/04 Python
python中的格式化输出用法总结
2016/07/28 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
对python函数签名的方法详解
2019/01/22 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
致标枪运动员加油稿
2014/02/15 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
老人节主持词
2015/07/04 职场文书
客户答谢会致辞
2015/07/30 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技