欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-28 22:24:16
下面小编就为大家分享一篇html5+css3进度条倒计时动画特效代码【推荐】。希望对大家有所帮助。一起跟随小编过来看看吧... 16-03-08...

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://www.jb51.net";
}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进度条倒计时动画特效代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。