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

我需要在

悬停

时创建一个动画边框。我尝试使用

css3

但未能获得完美的解决方案

我的例外输出：

因此，我喜欢在悬停时创建一个类似上图的

动画边框

。基本上，我需要在悬停时绘制一个边框

请帮助任何人实现此解决方案

---

提前感谢。

您可以使用SVG实现这一点，尽管我认为仅使用一种形状是不可能的，但我可能错了。您可以使用两个重叠的

来完成此操作。第三个示例更类似于您的图形

svg{
宽度：125px；
高度：125px；
变换：旋转（-90度）；
}
.svg_2，
.svg_3{
变换：旋转（-130度）；
}
/*377大致是圆的周长*/
/*…如果更改大小，也需要更改此值*/
.圆圈{
笔划阵列：377；
行程偏移：377；
过渡：所有的1容易；
}
.svg_3.圆{
行程偏移量：294；
}
.svg_1：悬停.circle{
笔划偏移：0；
}
.svg_2：悬停.circle{
笔划偏移：0；
}
.svg_3：悬停.circle{
笔划偏移：0；
}

---

您可以使用SVG实现这一点，尽管我认为仅使用一种形状是不可能的，但我可能错了。您可以使用两个重叠的

来完成此操作。第三个示例更类似于您的图形

svg{
宽度：125px；
高度：125px；
变换：旋转（-90度）；
}
.svg_2，
.svg_3{
变换：旋转（-130度）；
}
/*377大致是圆的周长*/
/*…如果更改大小，也需要更改此值*/
.圆圈{
笔划阵列：377；
行程偏移：377；
过渡：所有的1容易；
}
.svg_3.圆{
行程偏移量：294；
}
.svg_1：悬停.circle{
笔划偏移：0；
}
.svg_2：悬停.circle{
笔划偏移：0；
}
.svg_3：悬停.circle{
笔划偏移：0；
}

---

以下是如何在html画布中执行此操作：

• 侦听mousemove事件并设置一个标志，指示鼠标是否在圆圈内

• 运行一个动画循环，该循环在悬停时绘制递增的圆弧，在模糊时绘制递减的圆弧

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
var-PI=Math.PI；
var PI2=PI*2；
var扫描=0；
var半径=50；
var线宽=10；
var hoverState='new'；
var isInside=假；
//画布宽度=半径*2+线宽；
//画布。高度=半径*2+线宽；
var cw=画布宽度；
var ch=画布高度；
var cx=cw/2；
var-cy=ch/2；
ctx.线宽=线宽；
ctx.beginPath（）；
ctx.strokeStyle='black'；
ctx.弧（cx，cy，半径，0，PI2）；
ctx.stroke（）；
请求动画帧（动画）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的mousemove放在这里
var dx=鼠标x-cx；
var dy=老鼠Y；
isInside=dx*dx+dy*dyPI2）{
hoverState='idle'；
扫描=PI2；
}
if（sweep以下是如何在html画布中执行此操作：


侦听mousemove事件并设置一个标志，指示鼠标是否在圆圈内

运行一个动画循环，该循环在悬停时绘制递增的圆弧，在模糊时绘制递减的圆弧


下面是示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
var-PI=Math.PI；
var PI2=PI*2；
var扫描=0；
var半径=50；
var线宽=10；
var hoverState='new'；
var isInside=假；
//画布宽度=半径*2+线宽；
//画布。高度=半径*2+线宽；
var cw=画布宽度；
var ch=画布高度；
var cx=cw/2；
var-cy=ch/2；
ctx.线宽=线宽；
ctx.beginPath（）；
ctx.strokeStyle='black'；
ctx.弧（cx，cy，半径，0，PI2）；
ctx.stroke（）；
请求动画帧（动画）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的mousemove放在这里
var dx=鼠标x-cx；
var dy=老鼠Y；
isInside=dx*dx+dy*dyPI2）{
hoverState='idle'；
扫描=PI2；
}
如果（你会反对使用内嵌SVG吗？HI@Zac.Ledyard。谢谢你的回答。如果你能分享一些使用SVG的示例代码，很抱歉我是SVG新手。是的，我会发布一个示例，请给我一分钟。这是一个我的意思示例。你必须稍微处理一下这些值，但这里有一个工作版本：你会反对usi吗ng一个内联SVG？HI@Zac.Ledyard.谢谢你的回复。如果你能分享一些使用SVG的示例代码，很抱歉我是SVG新手。是的，我会发布一个示例，请给我一分钟。这是一个我的意思示例。你需要稍微玩弄一下这些值，但这里有一个工作版本：感谢你的帮助@uʍopǝpısdnThanks对你的帮助@uʍopǝpısdn