svg 实现圆环倒计时效果

一、先上效果图，项目中需要圆环根据中间的倒计时相应递减：

二、接下来看svg代码实现：
（1）css 部分

#svgContainer {position: relative;display: flex;align-items: center;justify-content: center;height: 200px;}#svgContainer > svg {position: absolute;}circle {-webkit-transition: stroke-dasharray .25s;transition: stroke-dasharray .25s;}

（2）html 部分

<div id="svgContainer"><svg width="220" height="220" VIEWBOX="0 0 220 220"><circle cx="110" cy="110" r="50" stroke-width="8" stroke="#D1D3D7" fill="none"></circle><circle cx="110" cy="110" r="50" stroke-width="8" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,220)" stroke-dasharray="1069 0"></circle></svg><span id="leftTime">10</span>
</div>

（3）js 部分

//获得第二个圆的引用var circle = document.getElementsByTagName('circle')[1];var initTime = 10;var leftTime = setInterval(function() {initTime--;if (initTime < 0) {initTime = 10;}$("#leftTime").text(initTime);var percent = initTime / 10;//圆的周长var perimeter = Math.PI * 2 * 50;//stroke-dasharray属性的两个参数和必须为周长circle.setAttribute('stroke-dasharray', perimeter * percent + ' ' + perimeter * (1 - percent));}, 1000)

以上，即可实现动态圆环倒计时效果。

三、最后来看三个属性：

stroke-dasharray 属性用来创建虚线，本例中可理解为设置svg圆形倒计时周长的有颜色和无颜色的切割线

stroke-dashoffset 属性指定了dash模式到路径开始的距离，即实线虚线绘制的起点距路径开始的距离，相当于css中的 text-indent。如设置 stroke-dashoffset: 20，即表示左边的实线向左移动20像素

tip：可以设置stroke-dashoffset与stroke-dasharray相同的值实现“画线”效果

stroke-width 属性定义了一条线，文本或元素轮廓厚度，即圆环宽度（粗度）

svg 实现圆环倒计时效果相关推荐

html 圆环实现多种颜色,SVG实现多彩圆环倒计时效果的示例代码
圆环倒计时我们经常见到,实现的方法也有很多种.但是本文将介绍一种全新的实现方式,使用SVG来实现倒计时功能. 本文主要用到了SVG的stroke-dasharray和stroke-dashoffset ...
svg实现圆环倒计时动画效果
效果展示 1. 状态过渡:57s.20s.3s.0s 2.svg制作由两圆环(一圆环作为灰色底色,一圆环倒计时60->0)一文本组成 <svg viewBox="0,0,100 ...
CSS3圆环倒计时效果
转载地址:http://liumiao.me/demo/count/ 效果演示 src="http://liumiao.me/demo/count/step12.html" scr ...
PR太难不会用？没关系，PPT也能制作倒计时效果
提起倒计时动画,大家第一时间想到的应该是用PR制作吧,可是PR使用起来比较麻烦,很多人不会用,这该怎么办?别慌张,又不是只有这一个软件能制作倒计时动画,今天小编就给大家分享一个制作倒计时动画的小技巧: ...
利用 canvas 实现圆形进度条，实现倒计时效果
#实现圆环渐变倒计时效果内容效果图需求分析实现技术实现过程全部源码 1. 效果图展示随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2. 需求分析可 ...
html自动刷新倒计时,基于JavaScript实现自动更新倒计时效果
实现倒计时效果需要掌握js中的两个知识点: 1.setTimeout函数每隔1秒钟更新秒钟时间 2.Date对象计算时间差下面贴出元旦倒计时代码 example.html //定义计时器,每隔 ...
python七段数码管设计图案-python实现七段数码管和倒计时效果
8是典型的七段数码管的例子,因为刚好七段都有经过,这里我写的代码是从1开始右转. 这是看Mooc视频写的一个关于用七段数码管显示当前时间 # -*-coding:utf-8 -*- import tu ...
android 列表倒计时,Android利用RecyclerView实现列表倒计时效果
最近面试时,面试官问了一个列表倒计时效果如何实现,现在记录一下. 运行效果图实现思路实现方法主要有两个: 1.为每个开始倒计时的item启动一个定时器,再做更新item处理: 2.只启动一个定时器 ...
python怎么让游戏倒计时_Python如何让倒计时效果的在固定区域刷新
time_remain是实现倒计时效果,但是如何把它固定在一行的指定区域呢? 不干扰其他区域的显示呢? 最后输出这样的信息,最右边的是总时长,但是倒计时效果出现在最左边,如果不预留 ' '*5 空格会 ...

svg 实现圆环倒计时效果

svg 实现圆环倒计时效果相关推荐

最新文章

热门文章