File size: 1,455 Bytes
babeaf6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
@keyframes audio-wave {
0%{
height: 10px;
trnsform: translateY(0px);
background: #1F4FCC;
}
25%{
height: 40px;
trnsform: translateY(-5px);
scaleY: 1.7;
background:#6785D3;
}
50%{
height: 10px;
trnsform: translateY(0px);
scaleY: 1.7;
background: #C2D3FF;
}
100%{
height: 10px;
trnsform: translateY(0px);
scaleY: 1.7;
background:fixed #EEF3FF;
}
}
.sound-wave{
display:flex;
justify-content: center;
align-items:center;
gap:8px;
height:60px
}
.sound-wave span{
height:18px;
width:10px;
display:block;
border-radius:8px;
background:#BEC5D9;
animation:audio-wave 2.2s infinite ease-in-out
}
.stop-animation span {
animation-play-state: paused;
}
.sound-wave span:nth-child(2) {
left:11px;
background:#FFFFFF;
animation-delay:0.2s
}
.sound-wave span:nth-child(3){
left:22px;
animation-delay:0.4s
}
.sound-wave span:nth-child(4){
left:33px;
animation-delay:0.6s
}
.sound-wave span:nth-child(5){
left:44px;
animation-delay:0.8s
}
.sound-wave span:nth-child(6){
left:55px;
animation-delay:1s
}
.audio-player {
display: flex;
}
.hidden {
display: none;
}
.options-container {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 40px;
bottom: 0;
width: 100%;
}
.call-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
flex-grow: 1;
} |