4

使用 CSS3 我看不出为什么基于 CSS 的 Ken Burns 效果不起作用。我的第一次尝试涉及使用 Jquery 向背景图像添加一个新类。

.flare1 {
    background-position:-50.1px -50.1px !important;
    -webkit-transition: all 5s ease-in-out;
}
function gallery() {
    $('.cornerimg').addClass('flare1');
}

这有效，但非常生涩。所以我正在考虑一种不同的方法。如果从一开始就用类动画设置图像会怎么样。我不熟悉 CSS3 动画，只熟悉过渡，但其目的是将永久类应用于一系列图像，使它们一直顺利地转换为 Ken Burn。

我为任何想尝试的人准备了一个可爱的试验场。 http://jsfiddle.net/gxUhH/10/

所有设置都基于我的初始代码。

有任何想法吗？

奇妙

编辑 -

好吧，伙计们，我发现这看起来很顺利。我看不到的是它有什么不同。他们正在使用 web-kit 中的翻译功能，但是当我尝试它时它就跳了。看一看。http://thing13.net/2010/02/css3-ken-burns-effect-2/

4

4 回答 4

3

您的动作很不稳定，因为您一次只能将背景移动至少 1 个像素。background-position您可以通过将 设置为 10px 并将转换时间设置为 来测试这一点10s linear，您会看到图像每秒移动一次，恰好移动一个像素。

一个像素听起来可能不多，但是当您缓慢移动时，它会非常明显。

我的解决方案是更快地移动图像。至少每秒 20 像素将是平滑运动的最低速度。

遗憾的是，在浏览器实现硬件加速之前，您可能无法对背景图像进行实时亚像素重采样。

于 2011-06-23T18:10:41.143 回答
0

你可以为你的 CSS 做这样的事情。（根据需要定制）

#gallery .imageitem {
    width:680px;
    height:380px;
    overflow:hidden;
    background-position:0px 0px;
    background-repeat:no-repeat;
}
.flare1 {
    -moz-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    -moz-animation-name: slide;
    -webkit-animation-name: slide;  
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slide {
  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}

@-webkit-keyframes slide {

  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}
.cornerimg {
    width:680px;
    height:380px;
}

http://jsfiddle.net/gxUhH/23/

于 2011-06-23T18:10:35.437 回答
0

我尝试使用来自protofunc的代码进行快速破解，该代码使用backgroundPosition jQuery 插件。该插件可让您控制背景位置，例如：

$(this).animate({'background-position': '500px 150px'})

我将一个巨大的 JPG 作为背景图像放在一个小 div 上。然后动画可以通过点击触发，或者通过回调事件堆叠，以及所有 jQuery 可以做的常见事情。它在我机器上的 Chrome 中运行非常流畅。

重新阅读您的问题后，它虽然没有使用 CSS3 ......所以这不是一个很有帮助的答案！:P

于 2011-06-23T18:10:58.097 回答
0

好吧，伙计们不会问我如何，而是通过关键帧动画它现在很流畅。 http://jsfiddle.net/gxUhH/47/

不过只有一个问题。当一个人在触摸屏设备上滚动页面时，它们会变得生涩。我认为我们需要在滚动时暂停它，然后在滚动完成后再次播放。

有任何想法吗？

于 2011-06-24T11:12:43.723 回答