Javascript 单击时顺时针设置边界圆的动画
我已经用svg创建了一个心形图标，它在单击时被填充，我还想做的是显示一个顺时针创建的心形外的圆形动画。当前，圆只是旋转，如下面的代码所示：Javascript 单击时顺时针设置边界圆的动画,javascript,css,Javascript,Css,我已经用svg创建了一个心形图标，它在单击时被填充，我还想做的是显示一个顺时针创建的心形外的圆形动画。当前，圆只是旋转，如下面的代码所示： Array.from（document.queryselectoral（“.heart”）.forEach（button=>button.addEventListener（'click'，function）（）{ if（按钮最近（“.circle”）.style.visibility==“可见”）{ 控制台。登录（“如果条件允许，则登录”）； button
Array.from（document.queryselectoral（“.heart”）.forEach（button=>button.addEventListener（'click'，function）（）{
if（按钮最近（“.circle”）.style.visibility==“可见”）{
控制台。登录（“如果条件允许，则登录”）；
button.closest（“.circle”）.style.visibility='hidden'；
}
否则{
console.log（“在其他情况下”）；
按钮。最近的（“.circle”）。style.visibility='visible'；
}
按钮。类列表。切换（“心脏填充”）；
})).circle{
可见性：隐藏；
保证金：100像素自动；
位置：相对位置；
溢出：隐藏；
宽度：107px；
高度：100px；
边界半径：50%；
方框阴影：0 3px红色；
}
.圆圈：悬停{
动画：边界1向前；
}
@关键帧边框{
0% {
可见性：隐藏；
变换：旋转（0度）；
}
100% {
能见度：可见；
变换：旋转（360度）；
}
}
svg{
最大高度：120px；
}
.心脏{
填充：透明；
过渡：全部5秒；
}
.心满意足{
填充物：红色；
边框：50px纯蓝；
}
.台词{
显示：无；
}
.台词显示{
填充物：红色；
}
.心脏{
行程：#FF0606；
行程限制：10；
笔画宽度：5px；
}
图标/愿望列表
圆圈笔划-划线偏移设置动画圆圈{
笔画：红色；
笔画宽度：1；
填充：粉红色；
笔划数组：1；
行程偏移：1；
动画：直线无限；
}
@关键帧破折号{
从{
行程偏移：1；
}
到{
笔划偏移：0；
}
}
svg{
高度：90vh；
显示：块；
变换：旋转（-90度）；
保证金：自动；
}