点状环形倒计时动画效果（使用icon作为基础图形）

使用icon简单做一个倒计时的动画

也是因为需求原因，要使用UI给的icon做一个倒计时；说实话，简单的环形倒计时真的不难，但时利用icon做一个环形倒计时我也是第一次，我们看下效果图

既然是icon 那我们只能更改它的color，但是color简单的写一个颜色名称或者inherit 从父级继承，无法满足我们的需求；柳暗花明又一村 color的这个属性大家应该都知道：transparent 懒得详细解释了直接上图

当然只是单纯这个属性也是无法满足我们的需求，这是需要用到background的一个属性：background-clip（规定背景的绘制区域）详细解释在此处，也是可以去菜鸟教程查看属性用法
看过上面连接内容或者去菜鸟教程看过的应该知道 background-clip：text 代表着什么意思吧？（表示元素的背景保留在前景内容中（文字），和其形状大小相同,目前仅支持chrome浏览器，兼容性差，谨慎使用）

.box{width: 100px;height:100px;position: relative;margin: 0 auto;font-size: 100px;background-image: linear-gradient(90deg,#f6fd1f 0%,#b2e88a 0%,#8edcba 0%,#57c8dd 0%,#e5e5e5 0%);-webkit-background-clip: text;color:transparent;}

这么设置改变的就是color属性。说这么多我就直接上代码吧

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>倒计时</title>//需要自己去阿里巴巴图库下载所需图标并引入相关文件<link rel="stylesheet" href="iconfont/demo.css"><link rel="stylesheet" href="iconfont/iconfont.css">// 引入jquery<script src="jquery-2.1.3.min.js"></script><style>body{background-color:#ccc; }.container{width: 300px;height: 600px;background-color: #fff;}.box{width: 100px;height:100px;position: relative;margin: 0 auto;font-size: 100px;background-image: linear-gradient(90deg,#f6fd1f 0%,#b2e88a 0%,#8edcba 0%,#57c8dd 0%,#e5e5e5 0%);-webkit-background-clip: text;color:transparent;}.time{width: 100%;text-align: center;position: absolute;top: 50px;font-size: 16px;font-weight: bold;color: #000;}.start{width: 60px;height: 30px;text-align: center;cursor: pointer;margin: 0 auto;}</style>
</head>
<body><div class="container"><div class="box iconfont icondaojishi"><div class="time">0:0:0</div></div><div class="start">开始</div></div><script>// 四个定时器，针对四个不同时间段的颜色var timer1,timer2,timer3,timer4 = nullvar one = 10 // 第一个定时从10开始 因为盒子大小原因  提前渲染多出来那部分var two = 0var three = 0var four = 0// 定时器速度var speed = 1000// 倒计时 var kaiguan = false // 开关 避免重复点击开始按钮$('.start').click(function(){if(kaiguan==false){// 开始测量kaiguan=true$('.start').html('测量中')$('.box').css({'background-image':'linear-gradient(90deg,#f6fd1f 0%,#b2e88a 0%,#8edcba 0%,#57c8dd 0%,#e5e5e5 0%)'})let str = 0.1  //一分钟// 根据倒计时长和渐变走完所需时间（即百分百 也就是 100）speed=Math.floor((str*60000)/90) // 应该是除100的 但是因为上面第一个定时器从 10 开始 所以100-90  直接除与90let djsTimeNum = str*60let djsTimer = setInterval(()=>{djsTimeNum--if(djsTimeNum<=0){// 测量结束$('.time').html('0:0:0')clearInterval(djsTimer)$('.start').html('测量结束')kaiguan = false }$('.time').html(formatSeconds(djsTimeNum))},1000)timer1=setInterval(add1,speed);}else{alert('已经开始了')}})function add1(){one+=1if(one>=30){clearInterval(timer1);two=onetimer2 = setInterval(add2,speed)}$('.box').css({'background-image':'linear-gradient(to top right,#f6fd1f '+one+'%,#b2e88a '+two+'%,#8edcba '+three+'%,#57c8dd '+four+'%,#e5e5e5 0%)'})}function add2(){two+=1if(two>=45){clearInterval(timer2);three=35timer3 = setInterval(add3,speed)}$('.box').css({'background-image':'linear-gradient(to top right ,#f6fd1f '+one+'%,#b2e88a '+two+'%,#8edcba '+three+'%,#57c8dd '+four+'%,#e5e5e5 0%)'})}function add3(){three+=1if(three>=75){clearInterval(timer3);four=threetimer4 = setInterval(add4,speed)}$('.box').css({'background-image':'linear-gradient(to right,#f6fd1f 20%,#b2e88a 25%,#8edcba '+three+'%,#57c8dd '+four+'%,#e5e5e5 0%)'})}function add4(){four+=1if(four>=95){clearInterval(timer4);}$('.box').css({'background-image':'linear-gradient(to right bottom,#f6fd1f 10%,#b2e88a 25%,#57c8dd '+three+'%,#f6fd1f '+four+'%,#e5e5e5 0%)'})}// 秒转时分秒格式function formatSeconds(value) {var theTime = parseInt(value);// 秒 var theTime1 = 0;// 分 var theTime2 = 0;// 小时 // alert(theTime); if (theTime > 60) {theTime1 = parseInt(theTime / 60);theTime = parseInt(theTime % 60);// alert(theTime1+"-"+theTime); if (theTime1 > 60) {theTime2 = parseInt(theTime1 / 60);theTime1 = parseInt(theTime1 % 60);}}var result = "" + parseInt(theTime) + "";if (theTime1 > 0) {result = "" + parseInt(theTime1) + ":" + result;} else {result = "" + parseInt(theTime1) + ":" + result;}if (theTime2 > 0) {result = "" + parseInt(theTime2) + ":" + result;} else {result = "" + parseInt(theTime2) + ":" + result;}return result;}</script>
</body>
</html>

项目已经上传到gitee上了： CSDN倒计时所用iconfont
效果并不是非常炫酷我分享是思路而不是dom代码可以自行完善
慎言勿喷谢谢！！！

点状环形倒计时动画效果（使用icon作为基础图形）相关推荐

js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
JS实现倒计时动画效果
js通过Date对象实现倒计时效果 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
android刷新时的圆形动画_Android 实现倒计时动画效果
本文没有写作背景,在闲暇之余,想巩固下用到的知识,才有了这篇文章的产出.觉得内容太简单的神们,可以绕道了,不过如果是个神,还是个喷子,可以留下改进建议再走也不迟. 想要实现的效果图如下: 点击&quo ...
Vue倒计时动画效果
这一次在b站看到一个博主做的一个倒计时的动画效果,跟着做了一下.以下是对此次项目的一些记录与总结. 该项目效果链接:Vue倒计时 HTML部分: <div id="app"& ...
Android 实现倒计时动画效果
想要实现的效果图如下: 点击"倒计时开始"按钮,会出现从10到0的倒计时动画.说是动画,其实并不是用animation等来制作,而仅仅是用TextView更新文字的方式来实现动画效 ...
svg实现圆环倒计时动画效果
效果展示 1. 状态过渡:57s.20s.3s.0s 2.svg制作由两圆环(一圆环作为灰色底色,一圆环倒计时60->0)一文本组成 <svg viewBox="0,0,100 ...
HTML制作色带,PS简单制作一个漂亮的混合色带gif动画效果
今天为大家介绍PS简单制作一个漂亮的混合色带gif动画效果方法,方法很简单的,教程介绍的很详细,好了,下面我们来看看吧! 先来看看案例的最终效果: 混合颜色带是一种特殊的高级蒙版,它可以快速隐藏像素. ...
html制作的动态粒子图像,一种基于AnimateCC+Canvas的随机粒子动画效果设计
潘博摘要:粒子动画是一种应用广泛的动画效果,也有不同的制作方法.Animate CC是Flash的延续和发展,在动画制作方面功能强大,而Canvas是HTML5在网页中绘制图形.制作动画的核心元素. ...
html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...

点状环形倒计时动画效果（使用icon作为基础图形）

使用icon简单做一个倒计时的动画

点状环形倒计时动画效果（使用icon作为基础图形）相关推荐

最新文章

热门文章