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

所属分类: 网页制作 / html5 阅读数: 1254
收藏 0 赞 0 分享

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进度条倒计时动画特效代码【推荐】

下面小编就为大家分享一篇html5+css3进度条倒计时动画特效代码【推荐】。希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5实现多张图片上传功能

这篇文章主要介绍了基于HTML5实现多张图片上传功能,在单张图片上传的基础上实现多张图片上传功能,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

html5 canvas移动浏览器上实现图片压缩上传

这篇文章主要为大家详细介绍了html5 canvas移动浏览器上实现图片压缩上传的相关方法,提出了解决方法,分享了解决问题的思路,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

HTML5 canvas实现移动端上传头像拖拽裁剪效果

这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

通过HTML5 Canvas API绘制弧线和圆形的教程

这篇文章主要介绍了通过HTML5 Canvas API绘制弧线和圆形的教程,用JavaScript可以自定义弧度以及设定起始终末点,使用JavaScript需要的朋友可以参考下
收藏 0 赞 0 分享

利用HTML5 Canvas制作键盘及鼠标动画的实例分享

这篇文章主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5 3D衣服摇摆动画特效

这篇文章主要为大家分享了一款HTML5 3D衣服摇摆动画特效,一款基于HTML5 Canvas的3D动画杰作,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

HTML5 Canvas入门学习教程

这篇文章主要介绍了HTML5 Canvas入门学习教程,讲解了Canvas标签的基本使用及基本的JavaScript对Canvas的操作方式,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5 Canvas基本线条绘制的实例教程

这篇文章主要介绍了HTML5 Canvas基本线条绘制的实例教程,包括直线和折线的绘制方法,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5 Canvas的常用线条属性值总结

这篇文章主要介绍了HTML5 Canvas的常用线条属性值总结,包括对lineCap属性、lineJoin属性、线宽和笔触样式四种属性的各种值的实例讲解,整理得非常给力,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多