0成本无痛实现环形进度条

起因

上周六朋友发过来的一个问题:

成本无痛实现环形进度条"

我的第一反应是,这不有手就行吗,border 大法好。随即便将这件事情抛诸脑后。

直到今天才觉得不妥,自己都没有实现过的东西,是怎么敢张口就来的?

于是引发了一连串的后续事件

后知后觉

从以前开始就觉得这种边边角角的东西,例如面包屑的拼接符,以及下面要讲的环形进度条都是可以通过 border 来实现的,就是实现方式有点复杂。

冥思苦想五分钟之后,觉得好像不能对 border 下手,那我只能原神百度启动,找到一篇使用 border 来实现的文章,但觉得太复杂,只能另寻出路。

<body> 
    <div class="circle"> 
        <div class="circle-inner"></div> 
    </div> 
</body>

在我写下几行代码之后我便有了新的思路,背景圆环角度,就这样一个不常用的东西(conic-gradient)从 mdn 文档钻了出来,这不就是一个很优秀的解法吗?

上效果

尽管不是很完美,但是我还是觉得很棒了。

后续思考

为啥我会不经过大脑的思考就直接将一个不切合实际的答案告诉给别人?

明明可以做一次简单的验证,却要将这个东西让没有能力的人去做?

痛腚思痛,是自己能力还不够这样全面思考问题,还是要多学习。

原文链接:https://juejin.cn/post/7336869936147841059 作者:阳知

(0)
上一篇 2024年2月19日 下午4:48
下一篇 2024年2月19日 下午4:58

相关推荐

发表回复

登录后才能评论