如何使用纯CSS实现无SVG的手绘铅笔圆圈悬停效果

可以纯CSS实现，不需要依赖SVG，核心实现思路和代码如下：

实现思路 #

• 仅需要单个目标元素，依靠::before/::after伪元素承载手绘圆圈样式，无需额外DOM节点
• 手绘不规则线条效果：通过多重微小偏移的box-shadow叠加、细微的滤镜模糊模拟铅笔手绘的线条抖动和粗糙质感，也可以通过多层线性渐变叠加模拟铅芯的颗粒感
• 悬停绘制动画：通过CSS @property注册可动画的自定义角度变量，配合锥形渐变conic-gradient实现描边从无到有的绘制效果，和SVG stroke-dashoffset动画的视觉效果一致
• 兼容性：除了极旧版本浏览器外，现代浏览器均支持上述特性，如需兼容低版本可以改用clip-path的多边形位移动画替代锥形渐变方案

核心代码示例 #

HTML结构：

<button class="pencil-circle-btn">悬停查看效果</button>

CSS代码：

/* 注册可动画的自定义角度变量 */
@property --circle-progress {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.pencil-circle-btn {
  position: relative;
  padding: 12px 24px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

/* 手绘圆圈容器 */
.pencil-circle-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  /* 模拟铅笔线条的颗粒质感 */
  background: repeating-linear-gradient(
    45deg,
    #666 0px,
    #666 0.5px,
    #777 0.5px,
    #777 1px
  );
  /* 用锥形渐变控制显示区域，实现描边动画 */
  --mask: conic-gradient(#000 var(--circle-progress), transparent var(--circle-progress));
  -webkit-mask: var(--mask);
  mask: var(--mask);
  /* 多重阴影模拟线条抖动的手绘效果 */
  box-shadow: 
    0.5px 0.5px 0 #555,
    -0.5px -0.3px 0 #555,
    0.3px -0.6px 0 #555,
    -0.4px 0.4px 0 #555;
  filter: blur(0.2px);
  transition: --circle-progress 0.6s ease-out;
}

/* 悬停触发动画 */
.pencil-circle-btn:hover::before {
  --circle-progress: 360deg;
}

优化方案 #

如果想要更接近真实手绘的不规则边缘，可以给锥形渐变的角度增加随机微小偏移，或者在伪元素上叠加一层半透明的base64格式噪点背景图，不需要额外资源即可模拟铅笔在纸上的纹理效果。

内容的提问来源于stack exchange，提问作者Adil Mughal