css3动画:无缝屏幕运动
css3动画:无缝屏幕运动
提问于 2013-07-27 22:58:23
我有一个网站，我想让它不断地从左向右移动，让它产生一种无缝流动的错觉，类似于这个网站上的东西，但不是悬停状态，只是水平移动。
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，这应该处理滚动问题，并允许水流动，问题是，当水循环结束时，有一个丑陋的跳转回到起点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-07-28 01:32:29
如果您只将转换应用到water，那么您可以准确地看到您的动画实际上是做什么的-只需将整个图像右转100 it，跳回原来的位置，然后再做一次。
你需要的是
#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;}
}它移动背景位置，而不是整个图像。
这是一个演示
Note：2000年代和10万%都是为了防止“丑陋的跳跃削减”发生。我的实现可能有点错误
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17903294
复制相关文章
相似问题
腾讯云开发者
