逐渐为 SVG 设置动画

Posted 2023-02-23

【中文标题】逐渐为 SVG 设置动画

【英文标题】：Animate SVGs gradually

【发布时间】：2021-05-09 01:24:02

【问题描述】：

我该如何解决这个问题。我需要在一个包含两个 svgs 或 imgs 的 div 上悬停动画，没关系。 当我将鼠标悬停在该 div 内时，我如何触发它，这两个 imgs 将例如移动。也许使用 javascript，但我似乎可以在悬停时瞄准 img。只有鼠标悬停？这使得状态永远改变了。我需要帮助。谢谢！

<div class="circle">
<img id="line-1" src="line.svg" >
<img id="line-2" src="line.svg" >
<div>

.circle 
  position: relative;
  height: 150px;
  width: 150px;
  border: 6px solid black;
  border-radius: 50%;
  padding: 10px;


#line-1 
positin: absolute;
left: 0;
animation: slide 1s ease-in infinite;

#line-2 
positin: absolute;
right: 0;
animation: slide-otherway 1s ease-in infinite;

@keyframes slide 
   0% 
left: 0;


100% 
left: 20px;



@keyframes slide-otherway 
   0% 
right: 0;


100% 
right: 20px;

【问题讨论】：

使用CSS transitions，而不是 CSS 动画。并且更喜欢将transform 属性转换为left 或right 属性。

【参考方案1】：

有了mouseenter你还需要使用mouseleave，mouseleave会在ofc时触发，muse离开