分享一款好看的倒计时文字代码,如果倒计时 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代码
© 版权声明
1. 资源都是经过站长或作者收集测试修改后发布分享。如若转载请在文内以超链形式注明狐狸库文章出处,谢谢合作!
2. 本站除原创内容,其余所有内容均收集自互联网,仅限用于学习和研究目的,本站不对其内容的合法性承担任何责任。如有版权内容,请通知我们或作者删除,其版权均归原作者所有,本站虽力求保存原有版权信息,但因众多资源经多次转载,已无法确定其真实来源,或已将原有信息丢失,所以敬请原作者谅解!
3. 本站用户所发布的一切资源内容不代表本站立场,并不代表本站赞同其观点和对其真实性负责,若您对本站所载资源作品版权归属存有异议,请留言附说明联系邮箱,我们将在第一时间予以处理 ,同时向您表示歉意!为尊重作者版权,请购买原版作品,支持您喜欢的作者,谢谢!
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客如有发现请立即向站长举报;本站资源文件大多存储在云盘,如发现链接或图片失效,请联系作者或站长及时更新。
THE END
请登录后查看评论内容