我正在开发代码战链接(一个 div)。我希望 div 内的 svg 在悬停时连续旋转。产生的悬停效果远非平滑，当鼠标在其上滚动时 svg 会跳跃。 mouseout 事件被注释掉了，因为它值得。优化这个的最佳方法是什么？代码笔:https://codepen.io/forTheLoveOfCode/pen/MOvRNb
CSS:
#codewars-butn{
position: absolute;
top: 20%;
left: 20%;
background-color: #B21C15;
border: 2px solid;
border-radius: 10px;
}
body{
background-color: #3F2740;
}
.codewars{
display: inline-block;
stroke:#000;
stroke-dasharray: 1 5;
}
HTML:
<body>
<div id="codewars-butn">
<svg class="codewars" width="100" height="100">
<defs>
<path id="curve" d="M50 50 A 20 20 0 1 0 80 70" stroke-width="10" stroke-linecap="round" fill="none"/>
</defs>
<use href="#curve"/>
<use href="#curve" transform="rotate(60, 50, 50)"/>
<use href="#curve" transform="rotate(120, 50, 50)"/>
<use href="#curve" transform="rotate(180, 50, 50)"/>
<use href="#curve" transform="rotate(240, 50, 50)"/>
<use href="#curve" transform="rotate(300, 50, 50)"/>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 0 0"
to="360 0 0"
dur="5s"
begin="mouseover"
<!-- end="mouseout" -->
repeatCount="indefinite"/>
</svg>
</div>
</body>
最佳答案
在这里，我删除了 svg 转换并使 CSS 成为唯一的解决方案。
#codewars-butn:hover svg{
animation-name: rotate;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
关于javascript - 如何使连续动画附加到悬停按钮内的 svg 平滑？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47309743/