velocity.js 在 2 个图像之间缩放

Question

我正在尝试将我的代码从 css 迁移到 velocity 以获得更好的外观和感觉:) 有人可以就完成此任务的最佳方法提出建议吗？当用户悬停菜单项时，它的大小会发生变化（缩放），基本上是从一张图片到另一张图片的过渡

这是纯粹的css:

.site nav li a.active-page  {
background-image: url('../images/img/menu-1-hover.png');
height: 94px;
right: -8px;
width: 94px;
-webkit-transition: all 0.09s easy;
    -moz-transition: all 0.09s easy;
    -ms-transition: all 0.09s easy;
    -o-transition: all 0.09s easy;
    transition: all 0.09s easy;
}
.site #menu-2 {background-image: url('../images/img/menu-2.png');

} .site #menu-2.active-page {background-image: url('../images/img/menu-2-hover.png'); }

谢谢

Answer 1

Web 平台上无法从一张图片到另一张图片进行动画处理。您可以通过设置 opacity 动画在具有不同背景的 2 个 div 之间设置动画，或者您可以设置 background-position.

动画

然而，如果 scale 是您想要的动画，您可以使用 Velocity 为带有图像的元素的 scaleX 和 scaleY 设置动画。

velocity.js 在 2 个图像之间缩放

velocity.js scale between 2 images

velocity.js