Ken Burns使用CSS 3-有多难

如何解决Ken Burns使用CSS 3-有多难

| 使用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中的translation函数，但是当我尝试它只是跳了一下。看一看。 http://thing13.net/2010/02/css3-ken-burns-effect-2/

解决方法

您的动作很生涩，因为您一次只能将背景移动至少1个像素。您可以通过将background-position设置为10px并将过渡时间设置为ѭ2this进行测试，您会发现图像每秒偏移一次，恰好一个像素。一个像素听起来可能并不多，但是当您缓慢移动时，它非常引人注目。我的解决方案是更快地移动图像。至少20像素/秒是平滑运动的最低速度。可悲的是，直到浏览器实现硬件加速，您才可能无法在背景图像上进行实时亚像素重采样。 , 您可以为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/ , 我尝试了使用backgroundPosition jQuery插件的protofunc代码进行快速破解。该插件可让您控制背景位置，例如：

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

我在一个小div上放置了一个巨大的JPG作为背景图片。然后，可以通过单击触发动画，或通过回调事件堆叠动画，而jQuery可以完成所有常规操作。它在我的计算机上的Chrome中运行非常流畅。重新阅读您的问题后，它虽然没有使用CSS3，但是答案不是非常有用！：P , 好家伙们不问我如何，但通过关键帧动画，它现在很流畅。 http://jsfiddle.net/gxUhH/47/ 不过只是一个问题。当人们在触摸屏设备上滚动时，页面变得生涩。我认为我们需要在滚动时将其暂停，然后在滚动完成后再次播放。有任何想法吗？

Ken Burns使用CSS 3-有多难

如何解决Ken Burns使用CSS 3-有多难

解决方法

相关推荐