制作类似波浪般移动的DIV

Question

我可以帮忙翻译。要求将每个div用CSS3或JavaScript制作成波浪形移动，我尝试了很多次但是无法实现。我想让html里的每张图片都像旗帜一样随着波浪移动。

HTML：

<div id="stage" style="padding-left: 180px; height: 160px;">
    <div id="spinner" style="-webkit-transform-origin: 180px 0 0;">
        <img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 160px;" src="image/1.jpg" width="200" height="160" alt="">
        <img style="-webkit-transform: rotateY(-50deg) translateX(180px); padding: 0 0 0 147px;" src="image/2.jpg" width="213" height="160" alt="">
        <img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="image/3.jpg" width="240" height="160" alt="">
        <img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px;" src="image/9.jpg" width="213" height="160" alt="">
        <img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 122px;" src="image/6.jpg" width="238" height="160" alt="">
    </div>
</div>

CSS：层叠样式表

@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-90deg);
    }
}       
#stage {
    margin: 1em auto;
    -webkit-perspective: 1200px;
}
#spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-transform-style: preserve-3d;
}
#spinner:hover {
    -webkit-animation-play-state: paused;
}
#spinner img {
    position: absolute;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

- bd_user1

---

你可能会对这个最近的问题感兴趣：https://dev59.com/a3_aa4cB1Zd3GeqP1Emh - Josh Crozier

对于你想要的确切效果还不太清楚，你能通过可视化的方式来描述一下吗？ - King King

我希望每个图片都能像国王一样飘动。 - bd_user1

Answer 1

如果你想使用CSS以波形动画的方式来动态展示div，那么这将会很麻烦。如果你可以尝试使用svg解决方案...

演示

HTML

<svg class="wave" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-120 130 451 40" xml:space="preserve">
    <path fill="none" stroke="#000" stroke-width="5" d="M331,160c-30,0-45-20-75-20s-46,20-76,20l0,0c-30,0-45-20-75-20 s-45,20-75,20s-45-20-75-20s-45,20-75,20" />
</svg>

CSS

.wave {
    overflow: hidden;
    width: 200px;
    height: 50px;
    margin: auto;
    display: block;
}
.wave path {
    stroke-dasharray: 500;
    stroke-dashoffset: 0;
    -webkit-animation: animate 3s linear infinite;
    animation: animate 3s linear infinite
}
@-webkit-keyframes animate {
    to {
        stroke-dashoffset: 990;
    }
}
@keyframes animate {
    to {
        stroke-dashoffset: 990;
    }
}

在这里，我们使用svg创建了一个波浪形，并使用CSS3动画对其进行了动画处理，如果您想在波浪之间留出间隙，使用较低的stroke-dasharray将有助于实现这一点。已在Firefox和Chrome上进行了测试。

---

此外，这个是由@Loktar创建的Fiddle，它使用JavaScript和CSS3动画创建了一个波浪。

- Mr. Alien