微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何使用纯 CSS 制作手绘铅笔圈?

如何解决如何使用纯 CSS 制作手绘铅笔圈?

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

解决方法

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

<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 以获得右上角的交叉?

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。