html - 如何使用纯 CSS 制作手绘铅笔圈？

Question

实际上，我正在寻找使用纯 CSS 而不使用 SVG 的手绘铅笔圆圈悬停效果。就像CodeMyUi 上的这个。但这是使用 SVG 实现的，我只想使用纯 CSS 创建它。请如果有人知道这个回答我。

Answer 1

也许你可以尝试这样的事情？

<style>
    .circle-on-hover {padding:16px;position:relative;display:inline-block;margin:16px;}
    .circle-on-hover:hover:after {position:absolute;width:100%;height:100%;border:3px solid blue;content:'';top:0;left:0;border-radius:100px 50px 150px;transform:rotate(-5deg);}
</style>
<div class="circle-on-hover">Lorem ipsum</div>

你可以摆弄边界半径和旋转来改变效果，或者添加:before以获得右上角的交叉？

希望这会为您指明正确的方向-请告诉我:-)