index.module.scss 954 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. .audioAnimate {
  2. position: absolute;
  3. left: 0;
  4. right: 0;
  5. top: 0;
  6. bottom: 0;
  7. background-color: rgba(0, 0, 0, .6);
  8. display: flex;
  9. justify-content: center;
  10. align-items: flex-end;
  11. padding-bottom: 30%;
  12. div {
  13. width: 5px;
  14. height: 20px;
  15. background: linear-gradient(135deg, #FF9946 0%, #FF5B20 100%);
  16. transform-origin: bottom;
  17. border-radius: 5px 5px 0 0;
  18. margin: 0 2px;
  19. }
  20. & div:nth-child(1) {
  21. animation: musicWave 0.5s infinite linear both alternate;
  22. }
  23. & div:nth-child(2) {
  24. animation: musicWave 0.2s infinite linear both alternate;
  25. }
  26. & div:nth-child(3) {
  27. animation: musicWave 0.6s infinite linear both alternate;
  28. }
  29. & div:nth-child(4) {
  30. animation: musicWave 0.3s infinite linear both alternate;
  31. }
  32. }
  33. @keyframes musicWave {
  34. 0% {
  35. height: 5px;
  36. }
  37. 100% {
  38. height: 20px;
  39. }
  40. }