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

Question

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

Answer 1

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

.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);
}

<div class="circle-on-hover">Lorem ipsum</div>

您可以 fiddle 使用 border-radius 和旋转来改变效果，也许添加 :before 以获得右上角的交叉？

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

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

How to make Hand drawn pencil circle using pure CSS?

html

css

pure-css