制作波浪动画 [英] Making a wave animation

问题描述

我正在尝试制作声波动画。此代码有什么问题？
我尝试更改缩放比例，但是没有用。有人可以给我一些动画练习的链接吗？

I am trying to make audio wave animation. What is wrong with this code? I tried to change translate to scale but it didn't work. Could someone give me a link to some exercises of animation?

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%, 75%, 100% {
    height: 5px;
    transform: translateY(0px);
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background-color: palevioletred;
  }
}

<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>

wave，代码正在运行，但不会显示为波形

wave , code is working but it does not appear as a wave

推荐答案

您可以删除通过设置 transform属性的动画来上下移动元素

You can remove the up and down movement of the elements by animating the transform property instead of the height of the elements.

您可以使用scaleY（）函数使元素沿Y轴（高度）增长。

You can use the scaleY() function to make the elements grow on the Y axis (height).

示例：

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%{
    transform: scaleY(1);
  }
  25% {
    transform: scaleY(4);
    background-color: palevioletred;
  }
}

<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>

这篇关于制作波浪动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！