Question

我正在尝试将我的代码从css迁移到速度以获得更好的外观和感觉:) 有人可以建议一下，实现这个目标的最佳途径是什么？当用户悬停一个菜单项时，它的大小变换（缩放），基本上是从一个图像到另一个图像的转换

这是纯粹的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

网络平台无法从一个图像动画到另一个图像。您可以通过动画opacity为不同背景的2个div设置动画效果，也可以为background-position设置动画。

尽管如果scale是您要设置动画的内容，您可以使用Velocity为带有图片的元素设置scaleX和scaleY。

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

1 个答案: