Question

如何使用CSS3或JavaScript让每个div像wave一样移动。我尝试了很多，但不能这样做。我希望这个HTML的每个img都会像wave一样移动。总之，每个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

如果您对div解决方案持开放态度，那么使用CSS在波形中制作svg动画会很麻烦。

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创建的小提琴，它使用JavaScript和CSS3动画来创建wave。

使div像波浪一样移动

1 个答案: