如何在悬停时创建动画图像？

Question

我在 XD 中有一个悬停动画的图形。我想在我的网站上实施它。 这类似于此屏幕截图 here

我尝试使用 CSS 转换但没有用。有没有人可以帮我做这件事？我的代码如下。

    <div class="graphic"></div>
    <style>
    .graphic{
        width: 500px;
        height: 500px;
        background-image: url(images/Illustration-Idle.svg);
        background-repeat: no-repeat;
        transition: background-image 5s ease-in-out;
    }
    .graphic:hover{
        background-image: url(images/Illustration-Hover.svg);
    }
    </style>

Answer 1

您需要将 class 或 Id 应用于 svg 的公牛和箭头 'path'。然后对它们使用过渡。我建议将您的 SVG 直接放在 div 中。

.bull{
  transition: all 1s ease-in-out;
}

svg:hover .bull{
  transform: translate(-50px, 50px);
}

.arrow{
  opacity:0;
  transition: all 1s ease-in-out;
}

svg:hover .arrow{
    opacity: 1;
    transform: translate(50px,0);
}