【问题标题】:Background image animation using css3 or jquery? [closed]使用 css3 或 jquery 的背景图像动画? [关闭]
【发布时间】:2013-02-15 02:02:56
【问题描述】:

谁能帮助我了解如何为这个网站上的背景图像设置动画

http://breakpoint-sass.com/

在学分部分,背景图像似乎在移动,我不知道它使用的是 css3 还是 jquery。

有没有关于如何做到这一点或通过使用插件的教程。

非常感谢。

【问题讨论】:

  • :) 这是一个简单的 .gif 动画 breakpoint-sass.com/images/point-break/…
  • 感谢您的回答,是的,我检查了元素并且图像是 .gif 格式,有没有办法在 css3 或现成的效果上做到这一点?
  • 当然,让我告诉你,秒
  • 再次感谢,它在哪里?

标签: jquery css plugins background-image css-animations


【解决方案1】:

只是一个简单的 BG 精灵图像动画演示

http://jsbin.com/ohulok/1/edit

var c = 0 ;
function loop(){
  c = ++c%5;
  $('#bird').css({backgroundPosition: (240*c)+'px 0px'});
}
setInterval(loop, 42);

信息:如果你想要一个 24fps 的速率,那就是 ~42 (41.666ms)

http://jsbin.com/ohulok/7/edit

【讨论】:

  • 酷!所以你需要创建一个图像的一系列动作然后脚本会做飞行的事情吗?..
  • many3x 谢谢,你太棒了!需要向你学习这个分享的东西
  • @user2074113 是的,这是一个使用“精灵”图像的示例。但你可以使用类似的逻辑和.animate(),然后移动一个背景
  • 好的,再次感谢您的知识和东西..:)
  • @user2074113 看看这个演示,船也会动! jsbin.com/ohulok/9/edit
猜你喜欢
  • 1970-01-01
  • 2012-09-23
  • 1970-01-01
  • 2017-03-15
  • 2023-03-08
  • 2011-01-08
  • 1970-01-01
  • 2012-03-10
相关资源
最近更新 更多