jquery - 制作像波浪一样移动的div

Question

如何使用 CSS3 或 JavaScript 让每个 div 像波浪一样移动。我尝试了很多但做不到。我希望此 html 的每个 img 都像波浪一样移动。总之，每个 img 都会像旗帜一样移动。

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

Answer 1

如果您对 svg 解决方案持开放态度，那么使用 CSS 以波形形式为 div 设置动画会很麻烦...

Demo

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 上测试

---

此外，this是由 @Loktar 创建的 fiddle 它使用 JavaScript 和 CSS3 动画创建波浪。