2

我必须建立一个以儿童为目标的网站，并且我希望有一些图像可以在悬停或单击时进行动画处理（仅限 CSS，只是为了好玩，我已经知道如何在 JS 中做到这一点）。你见过迪斯尼游戏吗？菜单实际上并不存在，您只有一些图像（例如日历或抽屉），如果您浏览它们，它们就会产生动画效果。我有一个女孩的形象（所有的图画都是漫画风格的），如果你悬停在她身上，我希望这个女孩向你打招呼。然后，动画分为不同的步骤： 1）放下手臂，并被桌子隐藏。共有三个图像：女孩、前臂和手（加上手臂的最后部分）。2）悬停！前臂向上移动，比如说 85-90 度。3）前臂停止，但手臂和手的其余部分继续移动（左，右，左，右，再一次）。考虑一下，

目前我只能让女孩移动一次（整个手臂向上移动，但这并不像我想要的那样自然）。如何实现我想要的多个动画？

非常感谢！

Ps 我不想让所有浏览器都这么舒服，只是 webkit+mozilla，不关心 IE。

编辑：

随着时间的推移多次转换呢？像“翻译（0,4em）”和x秒后“旋转（50度）”之类的东西？

4

1 回答 1

1

您可能会考虑查看 @keyframes 以使用纯 CSS 实现某些目标，但请记住您的浏览器支持会限制您。查看 caniuse.com 以了解故障可能是什么。否则，您正在考虑使用大量 javascript、sprite 和 CSS 对其进行编程。Flash 也始终是一种选择，虽然不是流行的，但在您描述的游戏网站上经常可以找到。

所以在 CSS 中是这样的：

//webkit only here:
@-webkit-keyframes fade-in {
0% {
    -webkit-transform: ease-in-out(0);
opacity: 0;
}
50% {
    opacity: 0;
}
100% {
 -webkit-transform: ease-in-out(1);
opacity: 1;
}
}

#el{
-webkit-animation-duration: 1.5s;
-webkit-animation-name: fade-in; 

}
于 2012-06-16T16:17:05.293 回答