Question

得到一点东西，我有一个网站，我在底部有水，我希望它从左到右不断移动，给它一个无缝流动的水的幻觉，类似于这个网站上的什么，除了没有悬停状态且只是水平状态。

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并且应该处理滚动问题并允许水流动，问题是当水循环结束时会有一个丑陋的跳跃切回到开始。

Answer 1

如果您仅将过渡应用于water，那么您可以准确地看到动画的实际效果 - 只需将整个图像移动到100px，然后再跳回到原始位置，然后重新进行

你需要拥有的东西就像

#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;}
}

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

Here is a demo

注意：2000年代和100,000％是为了防止“丑陋的跳跃”发生。我的实施可能会有些错误

css3动画：无缝屏幕动作

1 个答案: