Question

我很难确定如何使鼠标悬停时在链接上显示圆形涂鸦（如手绘草图）。在理想的世界中，它应该是一个动画的svg路径，但是在这一点上，对我来说，它的出现是可行的。这正是我要实现的目标：

我尝试将background-image设置为opacity：0，并且将鼠标悬停在opacity：1上，但是问题是，当链接较长时，背景图像不会覆盖所有内容。我也尝试过使用边框，但是后来我无法添加自定义边框形状，看起来就像用笔做的圆形草图一样。

以下是我在网上找到的一个示例：click here（在“突出显示的标题”下的“圈出我”的示例）

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

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上的示例

Answer 2

HTMl

<html>

<head>
    <style>

    </style>
</head>
<body>
    <a href="#" class="circle">Test</a>
</body>
</html>

CSS

.circle{
  width:50px;
  height:50px;
  padding: 4em 4em;
}
    .circle:hover {
    border-radius: 100%;        
    background: green;
    display:inline-block;
    line-height:100px;
    width:50px;
    height:50px;
}

只需尝试一下，让我知道它是否对您有用。我想帮你。

在悬停链接上绕圈旋转

2 个答案: