我正在创建一个演示应用程序,当单击一个按钮时,它会随机选择一个地点。一旦按钮被点击,我希望在选择场地之前,使用CSS3和jQuery通过老虎机旋转动画滚动场地。
我想过使用-webkit-keyframes
和改变背景位置,但这不是我想要的理想动画。
@-webkit-keyframes spin{
0% {
background-position: 0, 0 0;
-webkit-transform: rotateX(0deg);
}
100% {
background-position: 0, 0 -640px;
-webkit-transform: rotateX(360deg);
}
}
.rotating{
-webkit-animation: spin .5s infinite linear;
-webkit-transition: background-position .7s;
}
有没有人能提供一些关于如何实现这一点的见解?到目前为止,我只有Here。任何帮助都是非常感谢的。
谢谢
发布于 2011-09-25 01:21:37
使用http://odhyan.com/slot/插件的http://odhyan.com/slot/怎么样?
我不确定你的旋转关键帧方法是否会产生想要的效果。老虎机的显示屏是旋转的,但由于它的直径很大,所以看起来更像是一个连续的滚动。你需要扭曲图像的顶部和底部,以使它们看起来逼真。
如果模糊顶部和底部(透明gif或css3缩进阴影),可能会接近所需的效果。查看video of a real slot machine
发布于 2011-09-25 09:25:18
在我看来,javascript + trigonometry是你最好的选择。看看这个dynamic carousel,然后切换坐标轴,我想这就是你想要的效果。
https://stackoverflow.com/questions/7466070
复制相似问题