我正在尝试制作音频波动画。这段代码有什么问题？
我尝试将翻译更改为比例，但没有成功。有人可以给我一些动画练习的链接吗？
* {
-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
您可以通过动画来消除元素的上下移动变换属性 https://developer.mozilla.org/en-US/docs/Web/CSS/transform而不是元素的高度。
您可以使用scaleY()函数使元素在Y轴（高度）上增长。
例子 ：
* {
-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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
