热门关键字:
jquery > jquery插件 > html5 > html5+css3进度条倒计时动画特效

html5+css3进度条倒计时动画特效

22812
所属分类:html5
发布时间:2015/11/12 15:09:16
下载量:2055
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=504

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="http://www.jq-school.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 响应式 进度条特效 circle 动画插件 360度旋转 3D特效 时间特效
  • html5+css3进度条倒计时动画特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • html5+css3进度条倒计时动画特效
  • html5+css3进度条倒计时动画特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐