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教程(5):网页背景图片
Apr 02 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 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
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
Sort()函数的多种用法
2016/03/20 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python怎么对数字进行过滤
2020/07/05 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
应届实习生的自我评价范文
2014/01/05 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
企业节能减排实施方案
2014/03/19 职场文书
新学期开学演讲稿
2014/05/24 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
国庆促销活动总结
2014/08/29 职场文书
个人委托书范本
2014/09/13 职场文书
教师见习报告范文
2014/11/03 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis