Advertisement
ukamori

spinning headphone circle mp3

Jul 31st, 2022
2,415
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.43 KB | None | 0 0
  1. <head>
  2. <script src="https://kit.fontawesome.com/1953b7c367.js" crossorigin="anonymous"></script>
  3. </head>
  4.  
  5. <style>
  6. #music-player {
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. }
  11. #music-player {
  12. height: 1.55em;
  13. width: 1.55em;
  14. font-size: 1.5em;
  15. padding: 0.125em;
  16. border-radius: 50%;
  17. border: 1px solid #fff;
  18. background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(213,158,255,1) 100%);
  19. -webkit-filter: drop-shadow(0px 0px 1.5px #e0b8ff);
  20. position: absolute;
  21. bottom:3em;
  22. left: 6.5em;
  23. z-index: 40;
  24. -webkit-animation: spin 2s linear infinite;
  25. -webkit-animation:spin 4s linear infinite;
  26. -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite;
  27. }
  28. @-moz-keyframes spin {
  29. 100% {
  30. -moz-transform: rotate(360deg);
  31. }
  32.  
  33. } @-webkit-keyframes spin {
  34. 100% {
  35. -webkit-transform: rotate(360deg);
  36. }
  37. }
  38. @keyframes spin {
  39. 100% {
  40. -webkit-transform: rotate(360deg);
  41. transform:rotate(360deg);
  42. }
  43. }
  44. #music-player:hover {
  45. -webkit-animation: pop 0.3s ease;
  46. }
  47. </style>
  48.  
  49. <div id="music-player"><i class="fa-solid fa-headphones"style="font-size:0.8em; color:#fff;-webkit-text-stroke: 0.5px #e0b8ff;"></i></div>
  50. <audio id="audio" src="https://dl.dropbox.com/s/l2impfql42ku4fu/iz%20one%20dreamlike.mp3?dl=0"></audio>
  51.  
  52. <script>
  53. document.getElementById("music-player").onclick = function() {
  54. var audio = document.getElementById("audio");
  55. if (audio.paused) audio.play();
  56. else audio.pause();
  57. };
  58. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement