悬停时围绕链接圈出

Question

我无法弄清楚如何在悬停时使圆形涂鸦（如手绘草图）出现在链接上。在完美的世界中，它应该是一个动画 svg 路径，但此时仅出现对我来说就可以了。这正是我想要实现的目标：

我尝试将背景图像设置为不透明度：0，并将鼠标悬停在不透明度：1 上，但问题是，当链接较长时，背景图像无法覆盖全部内容。我也尝试过使用边框，但后来我无法添加自定义边框形状，使其看起来像用钢笔绘制的圆形草图。

这是我在网上找到的一个示例：单击此处，“突出显示的标题”下的“圈我”示例

我希望这一切都有意义，谢谢！

Answer 1

您可以通过使用 Chrome DevTools 或参考站点中的其他类似工具来了解如何执行此操作。

<div class='button'>
  <button>Click Me</button>
  <svg preserveAspectRatio="none">
    <path fill="none" d="..." />
  </svg>
</div>

.button {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.button button {
  padding: 8px 16px;
  border: none;
  background: none;
  outline: none;
}

.button svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.button path {
  stroke: #db3157;
  stroke-width: 8px;
  stroke-dasharray: 0 1500;
}

.button:hover path {
  animation: draw 1s forwards;
}

@keyframes draw {
  from {
    stroke-dasharray: 0 1500;
  }

  to {
    stroke-dasharray: 1500 1500;
  }
}

JSFiddle上的示例