手写的Svg, 如果倒计时 3 对你来说不够,你可以添加额外的色块和颜色。

html代码
<div class="demo">
<div class="demo__colored-blocks">
<div class="demo__colored-blocks-rotater">
<div class="demo__colored-block"></div>
<div class="demo__colored-block"></div>
<div class="demo__colored-block"></div>
</div>
<div class="demo__colored-blocks-inner"></div>
<div class="demo__text">青鹿云</div>
</div>
<div class="demo__inner">
<svg class="demo__numbers" viewBox="0 0 100 100">
<defs>
<path class="demo__num-path-1" d="M40,28 55,22 55,78"/>
<path class="demo__num-join-1-2" d="M55,78 55,83 a17,17 0 1,0 34,0 a20,10 0 0,0 -20,-10"/>
<path class="demo__num-path-2" d="M69,73 l-35,0 l30,-30 a16,16 0 0,0 -22.6,-22.6 l-7,7"/>
<path class="demo__num-join-2-3" d="M28,69 Q25,44 34.4,27.4"/>
<path class="demo__num-path-3" d="M30,20 60,20 40,50 a18,15 0 1,1 -12,19"/>
</defs>
<path class="demo__numbers-path"
d="M-10,20 60,20 40,50 a18,15 0 1,1 -12,19
Q25,44 34.4,27.4
l7,-7 a16,16 0 0,1 22.6,22.6 l-30,30 l35,0 L69,73
a20,10 0 0,1 20,10 a17,17 0 0,1 -34,0 L55,83
l0,-61 L40,28" />
</svg>
</div>
</div>
CSS代码
© 版权声明
本站网络名称:
青鹿云
本站永久网址:
www.milubk.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权请联系站长删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
- 最新
- 最热
只看作者