Advertisement
y2kcarrds

miyoun uwu ai music player

Jun 23rd, 2022
1,000
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.45 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: 2.15em;
  13. width: 2.15em;
  14. font-size: 1.5em;
  15. padding: 0.125em;
  16. border-radius: 50%;
  17. border: 1px solid #fff;
  18. background: rgb(255,255,255);
  19. background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(237,211,255,1) 100%);
  20. -webkit-filter: drop-shadow(0px 0px 1.5px #e4c8f6);
  21. position: absolute;
  22. top:1em;
  23. left: 1em;
  24. z-index: 40;
  25. -webkit-animation: spin 2s linear infinite;
  26. -webkit-animation:spin 4s linear infinite;
  27. -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite;
  28. }
  29. @-moz-keyframes spin {
  30. 100% {
  31. -moz-transform: rotate(360deg);
  32. }
  33.  
  34. } @-webkit-keyframes spin {
  35. 100% {
  36. -webkit-transform: rotate(360deg);
  37. }
  38. }
  39. @keyframes spin {
  40. 100% {
  41. -webkit-transform: rotate(360deg);
  42. transform:rotate(360deg);
  43. }
  44. }
  45. #music-player:hover {
  46. -webkit-animation: pop 0.3s ease;
  47. }
  48. </style>
  49.  
  50. <div id="music-player"><i class="fa-solid fa-headphones"style="font-size:1em; color:#fff;-webkit-text-stroke: 0.5px #f0d1ff;"></i></div>
  51. <audio id="audio" src="https://dl.dropbox.com/s/l2impfql42ku4fu/iz%20one%20dreamlike.mp3?dl=0"></audio>
  52.  
  53. <script>
  54. document.getElementById("music-player").onclick = function() {
  55. var audio = document.getElementById("audio");
  56. if (audio.paused) audio.play();
  57. else audio.pause();
  58. };
  59. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement