123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- .audioAnimate {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, .6);
- display: flex;
- justify-content: center;
- align-items: flex-end;
- padding-bottom: 30%;
- div {
- width: 5px;
- height: 20px;
- background: linear-gradient(135deg, #FF9946 0%, #FF5B20 100%);
- transform-origin: bottom;
- border-radius: 5px 5px 0 0;
- margin: 0 2px;
- }
- & div:nth-child(1) {
- animation: musicWave 0.5s infinite linear both alternate;
- }
- & div:nth-child(2) {
- animation: musicWave 0.2s infinite linear both alternate;
- }
- & div:nth-child(3) {
- animation: musicWave 0.6s infinite linear both alternate;
- }
- & div:nth-child(4) {
- animation: musicWave 0.3s infinite linear both alternate;
- }
- }
- @keyframes musicWave {
- 0% {
- height: 5px;
- }
- 100% {
- height: 20px;
- }
- }
|