style.scss 802 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. .y-bg-music-controls {
  2. --y-bg-music-controls-size: 80rpx;
  3. opacity: 0;
  4. pointer-events: none;
  5. transition: opacity 0.3s;
  6. position: fixed;
  7. right: 20rpx;
  8. top: 200rpx;
  9. width: var(--y-bg-music-controls-size);
  10. height: var(--y-bg-music-controls-size);
  11. border-radius: 50%;
  12. background: rgba(0, 0, 0, 0.25);
  13. backdrop-filter: blur(9rpx);
  14. -webkit-backdrop-filter: blur(9rpx);
  15. display: flex;
  16. align-items: center;
  17. justify-content: center;
  18. &__show {
  19. opacity: 1;
  20. pointer-events: auto;
  21. }
  22. &__player {
  23. animation: y-bg-music-rotate 3s linear infinite;
  24. }
  25. }
  26. // 关键帧 旋转动画
  27. @keyframes y-bg-music-rotate {
  28. 0% {
  29. transform: rotate(0deg);
  30. }
  31. 100% {
  32. transform: rotate(360deg);
  33. }
  34. }