javascript - 如何制作波浪动画？

Question

我想掀起波澜。我制作了示例动画。所以我想像这样改变这个动画。有许多矩形。扩大矩形的两边

• 我想做的是这次矩形正在扩展两侧（上下两侧），但我只想像音乐播放器一样在侧面（上侧）扩展。

 * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;

            }
            div {
            width: 1300px;
            height: 300px;
            margin: 100px auto;
            }
            span {
            display: inline-block;
            background-color: green;
            width: 20px;
            height: 20px;
            animation: wave 1s linear infinite;
            }
            .a1 {
            animation-delay: .0s;
            }
            .a2 {
            animation-delay: .2s;
            }
            .a3 {
            animation-delay: .3s;
            }
            .a4 {
            animation-delay: .4s;
            }
            .a5 {
            animation-delay: .5s;
            }
            .a6 {
            animation-delay: .6s;
            }
            .a7 {
            animation-delay: .7s;
            }
            .a8 {
            animation-delay: .8s;
            }
            .a9 {
            animation-delay: .9s;
            }
            .a10 {
            animation-delay: 1.0s;
            }
            
            
            @keyframes wave {
            50%{
                transform: scaleY(80);
                transform: scaleY(5);
            }
            
            }

<div>
            <span class="a1"></span>
            <span class="a2"></span>
            <span class="a3"></span>
            <span class="a4"></span>
            <span class="a5"></span>
            <span class="a6"></span>
            <span class="a7"></span>
            <span class="a8"></span>
            <span class="a9"></span>
            <span class="a10"></span>
            
        </div>

标签： javascripthtmljquerycss

Answer 1

只需将transform-origin跨度设置为bottom center（默认为center center）。

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
div {
    width: 1300px;
    height: 300px;
    margin: 100px auto;
}
span {
    display: inline-block;
    background-color: green;
    width: 20px;
    height: 20px;
    animation: wave 1s linear infinite;
    transform-origin: bottom center;
}
.a1 {
    animation-delay: .0s;
}
.a2 {
    animation-delay: .2s;
}
.a3 {
    animation-delay: .3s;
}
.a4 {
    animation-delay: .4s;
}
.a5 {
    animation-delay: .5s;
}
.a6 {
    animation-delay: .6s;
}
.a7 {
    animation-delay: .7s;
}
.a8 {
    animation-delay: .8s;
}
.a9 {
    animation-delay: .9s;
}
.a10 {
    animation-delay: 1.0s;
}
            
@keyframes wave {
    50% {
         transform: scaleY(80);
         transform: scaleY(5);
    }
}

<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
  <span class="a6"></span>
  <span class="a7"></span>
  <span class="a8"></span>
  <span class="a9"></span>
  <span class="a10"></span>          
 </div>