Jquery 使用动画围绕圆绘制边框

当我在圆上悬停时，我想要一个2px的边框慢慢地画一个圆。像这样的

我尝试了相同的方法，但我在圆圈下有内容，所以当我在上面悬停时，框阴影与内容重叠。无论如何都要实现这一点（CSS3或jQuery）

我现在的小提琴

同侧阴唇

希望这就是你想要的

要使边界动画变慢，只需增加时间延迟。就像我在这里做的一样

.circle:hover {
  animation: border 2s ease 1 forwards;
}

更新代码

已编辑

html{
身高：100%；
}
身体{
身高：100%；
背景：ddd；
}
.标题{
宽度：100%；
高度：100px；
背景：青色；
z指数：9999；
}
.圆形夹持器{
宽度：150px；
保证金：0自动；
填充：10px；
溢出：隐藏；
}
.圆圈{
位置：相对位置；
宽度：120px；
高度：120px；
边界半径：50%；
背景：红色；
盒影：60px-60px 0 2px#dddddd，-60px-60px 0 2px#dddddd，-60px 60px 0 2px#dddddddddd，60px 60px 0 2px#dddddddddd，0 0 0 2px#dddddddddddddddddddd；
}
.圆圈：悬停{
动画：边框2向前移动1；
光标：指针；
}
@关键帧边框{
0% {
盒影：60px-60px 0 2px#dddddd，-60px-60px 0 2px#dddddd，-60px 60px 0 2px#ddddddddd，60px 60px 0 2px#ddddddddddd，0 0 2px黑色；
}
25% {
盒影：0-125px 0 2px#dddddd，-60px-60px 0 2px#dddddd，-60px 60px 0 2px#ddddddddd，60px 60px 0 2px#ddddddddddd，0 0 2px黑色；
}
50% {
盒影：0-125px 0 2px#dddddd，-125px 0 px 0 2px#ddddddd，-60px 60 px 0 2px#ddddddddd，60px 60 px 0 2px#ddddddddddd，0 0 2px黑色；
}
75% {
盒影：0-125px 0 2px#dddddd，-125px 0 px 0 2px#dddddd，0px 125px 0 2px#ddddddddd，60px 60px 0 2px#ddddddddddd，0 0 2px黑色；
}
100% {
盒影：0-125px 0 2px#dddddd，-125px 0 px 0 2px#dddddd，0px 125px 0 2px#dddddddd，120px 40px 0 2px#ddddddddddd，0 0 2px黑色；
}
}
跨度{
位置：绝对位置；
底部：-50px；
颜色：#333；
文本转换：大写；
文本对齐：居中；
字体大小：粗体；
}

同侧阴唇

希望这就是你想要的

要使边界动画变慢，只需增加时间延迟。就像我在这里做的一样

.circle:hover {
  animation: border 2s ease 1 forwards;
}

更新代码

已编辑

html{
身高：100%；
}
身体{
身高：100%；
背景：ddd；
}
.标题{
宽度：100%；
高度：100px；
背景：青色；
z指数：9999；
}
.圆形夹持器{
宽度：150px；
保证金：0自动；
填充：10px；
溢出：隐藏；
}
.圆圈{
位置：相对位置；
宽度：120px；
高度：120px；
边界半径：50%；
背景：红色；
盒影：60px-60px 0 2px#dddddd，-60px-60px 0 2px#dddddd，-60px 60px 0 2px#dddddddddd，60px 60px 0 2px#dddddddddd，0 0 0 2px#dddddddddddddddddddd；
}
.圆圈：悬停{
动画：边框2向前移动1；
光标：指针；
}
@关键帧边框{
0% {
盒影：60px-60px 0 2px#dddddd，-60px-60px 0 2px#dddddd，-60px 60px 0 2px#ddddddddd，60px 60px 0 2px#ddddddddddd，0 0 2px黑色；
}
25% {
盒影：0-125px 0 2px#dddddd，-60px-60px 0 2px#dddddd，-60px 60px 0 2px#ddddddddd，60px 60px 0 2px#ddddddddddd，0 0 2px黑色；
}
50% {
盒影：0-125px 0 2px#dddddd，-125px 0 px 0 2px#ddddddd，-60px 60 px 0 2px#ddddddddd，60px 60 px 0 2px#ddddddddddd，0 0 2px黑色；
}
75% {
盒影：0-125px 0 2px#dddddd，-125px 0 px 0 2px#dddddd，0px 125px 0 2px#ddddddddd，60px 60px 0 2px#ddddddddddd，0 0 2px黑色；
}
100% {
盒影：0-125px 0 2px#dddddd，-125px 0 px 0 2px#dddddd，0px 125px 0 2px#dddddddd，120px 40px 0 2px#ddddddddddd，0 0 2px黑色；
}
}
跨度{
位置：绝对位置；
底部：-50px；
颜色：#333；
文本转换：大写；
文本对齐：居中；
字体大小：粗体；
}

同侧阴唇

您在css中的何处编写了悬停效果？也许这个答案可以帮助您发现这个答案也很有用。这是一个循环的进度条（倒计时），它慢慢地画出一个循环的边框——你在css中写悬停效果的地方？也许这个答案可以帮助你发现这个也很有用。这是一个圆形进度条（倒计时），它慢慢地画出一个圆形边框-边框应该慢慢地画在圆圈周围。这不是我想要的。@SharathDaniel用解释更新了代码。希望有帮助。我对代码有问题，上面有一个div，上面有一个图片，圆圈显示在那里。请检查更新的小提琴@SharathDaniel:给溢出：隐藏到。圈出持有者类。在这里摆弄：代码段现在已更新。请检查。边界应该慢慢地绕着圆圈画。这不是我想要的。@SharathDaniel用解释更新了代码。希望有帮助。我对代码有问题，上面有一个div，上面有一个图片，圆圈显示在那里。请检查更新的小提琴@SharathDaniel:给溢出：隐藏到。圈出持有者类。在这里摆弄：代码段现在已更新。请查收。