0

昨天问了一个与此类似的问题，Zeaklous 为我提供了一个很好的答案，可以让水从左到右无缝移动。

所以我尝试将相同的东西应用到无缝地从上到下移动的图像上，认为使用相同的方法会起作用，但我觉得我错过了一些东西。

html是：

<div id="waterfall"></div>

CSS是：

#waterfall {
background: url(img/waterfall.png);
background-repeat: no-repeat;
width: 100%;
height: 1200px;
position: absolute;
top: 1150px;
right: 870px;
z-index: 5;
-webkit-transition: flow 3s ease-out;
    -moz-transition: flow 3s ease-out;
    -o-transition: flow 3s ease-out;
    transition: flow 3s ease-out;

animation: flow 2000s linear infinite;
}

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

当我将宽度设置为 45px 时遇到了一些问题，无法让任何动画工作。所以我将它设置为 100%，但随后它就消失了，我再也找不到它了。

如果我将动画更改为水平，它可以工作，但只有宽度：100%，我尝试让它垂直移动的那一刻是行不通的。

我在这里缺少什么与垂直动画不同的地方？

任何帮助是极大的赞赏。

4

1 回答 1

0

我相信您遇到的大部分问题都与background-repeat: no-repeat;. 动画的设置方式，它使用重复来创建流程。当您no-repeat打开时，它会中断到期的流程（因为它依赖于图像重复）。这是您的代码的演示，仅删除了这一行并将 %flow固定（由于您的绝对定位，向下滚动以查看动画）。您现在可以看到它的作用，我不确定您最终希望它看起来如何。

将其从水平动画更改为垂直动画应该没有问题，正如这个新演示所看到的那样，它们分别显示了两种效果。我所做的只是切换after动画中的 x 和 y 值：http: //cssdeck.com/labs/mjsrldib如果你放background-repeat: no-repeat;回去，你可以看到它产生的问题

编辑你的问题促使我尝试制作一些像瀑布一样落下但仍然像你的水元素一样横向移动的东西。这是我在很短的时间内想到的。它可能以某种方式被证明是有用的

于 2013-07-28T18:01:32.577 回答