0

有点坚持，我有一个底部有水的网站，我希望它不断地从左到右移动，给它一种无缝流动的水的错觉，类似于这个网站上的东西，除了不是悬停状态，仅水平。

http://www.priteshgupta.com/2011/07/filling-a-glass-with-water-using-html5/

我拥有的 html 是一个简单的空 div 标签（一切都在 css 上）

<div id="water"></div>

而CSS是：

#water {
  background: url(img/ocean.png);   
  margin-top: 1000px;
  width: 100%;
  height: 400px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  z-index: 3;
  animation: water 2s linear infinite;
}

@keyframes water {
  to {transform: translate(100px,0);}
  from {transform: translate(0px,0);}
}

图片如下所示： http: //prntscr.com/1hwfnz

关于最好的方法的任何想法？任何帮助是极大的赞赏。谢谢

作为旁注，我尝试了这个CSS：

#water {
  background: url(img/ocean.png);   
  margin-top: 1000px;
  width: 200%;
  height: 400px;
  margin-left:-100px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  z-index: 3;
  animation: water 2s linear infinite;
}

@keyframes water {
to {transform: translate(100px,0);}
from {transform: translate(0px,0);}
}

我可以将溢出设置为隐藏 x，这应该可以解决滚动问题并让水流动，问题是当水循环结束时，会出现一个难看的跳转回开始。

4

1 回答 1

1

如果您将过渡应用于 only water，那么您可以准确地看到您的动画实际所做的 - 只需将整个图像向右移动 100 像素，跳回原始位置，然后再做一次

你需要的是类似的东西

#water {
  background: url(http://i.imgur.com/Lrvw1oc.png);   
  /*margin-top: 1000px;*/
  width: 100%;
  height: 200px;
  -webkit-transition: water 3s ease-out;
  -moz-transition: water 3s ease-out;
  -o-transition: water 3s ease-out;
  transition: water 3s ease-out;
  z-index: 3;
  animation: water 2000s linear infinite;
}

@keyframes water {  
  0% {background-position: 0 0;}
  100% {background-position: 100000% 0;}
}

它移动背景位置，而不是整个图像。

这是一个演示

注意：2000 年代和 100,000% 是为了防止“丑陋的跳切”发生而解决的问题。我的实现可能有点错误

于 2013-07-28T01:32:29.400 回答