弄一个波浪动画
it1352
帮助1人
问题说明
我正在尝试制作声波动画。此代码有什么问题?
我尝试更改缩放比例,但是没有用。有人可以给我一些动画练习的链接吗?
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
正确答案
#1
您可以删除通过设置 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>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tanhcebkgc
系列文章
更多
同类精品
更多
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
检查邮件是否发送成功
it1352 07-25 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
Android微调工具-删除当前选择
it1352 06-20 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20 -
希伯来语的空格句子标记化错误
it1352 06-22