如何在悬停时使用 css3 或 canvas 创建动画边框？

Question

我需要创建一个动画边框。hovering我尝试使用css3但无法获得完美的解决方案。

我的例外输出：

所以我喜欢animated border在悬停时创建类似上面的图像。基本上我需要draw a border在悬停时创建。

请帮助任何人实现这一解决方案。

提前致谢。

Answer 1

你可以使用 SVG 来做到这一点，尽管我认为仅使用一种形状是不可能的，但我可能是错的。你可以用两个重叠的<ellipse>. 第三个例子与你的图形更相似......

svg {
  width: 125px;
  height: 125px;
  transform: rotate(-90deg);
}

.svg_2,
.svg_3{
  transform: rotate(-130deg);
}

/* 377 is roughly the circumference of the circle */
/*...if you change the size you will need to alter this value too*/
.circle {
  stroke-dasharray: 377; 
  stroke-dashoffset: 377;
  transition: all 1s ease;
}

.svg_3 .circle {
  stroke-dashoffset: 294;
}

.svg_1:hover .circle {
  stroke-dashoffset: 0;
}

.svg_2:hover .circle {
  stroke-dashoffset: 0;
}

.svg_3:hover .circle {
  stroke-dashoffset: 0;
}

<svg class="svg_1" xmlns="http://www.w3.org/2000/svg">
 <g>
  <ellipse ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="5" stroke="#000000" fill="#ffffff"/>
  <ellipse ry="60" rx="60" class="circle" cy="62.5" cx="62.5" stroke-width="5" stroke="#00c81c" fill="transparent"/>
 </g>
</svg>

<svg class="svg_2" xmlns="http://www.w3.org/2000/svg">
 <g>
  <ellipse ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="5" stroke="#000000" fill="#ffffff"/>
  <ellipse ry="60" rx="60" class="circle" cy="62.5" cx="62.5" stroke-width="5" stroke="#00c81c" fill="transparent"/>
 </g>
</svg>

<svg class="svg_3" xmlns="http://www.w3.org/2000/svg">
 <g>
  <ellipse ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="5" stroke="#000000" fill="#ffffff"/>
  <ellipse ry="60" rx="60" class="circle" cy="62.5" cx="62.5" stroke-width="5" stroke="#00c81c" fill="transparent"/>
 </g>
</svg>

代码笔版本