greenmelon

spinning music note player

Dec 20th, 2021 (edited)
1,163
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.43 KB | None | 0 0
  1. <style>
  2. @font-face {
  3. font-family: emoji;
  4. src: url(https://dl.dropbox.com/s/cvba4kh6qm23mru/EmojiFont.ttf);
  5. }
  6.  
  7. #music-player {
  8. display: flex;
  9. align-items: center;
  10. justify-content: center;
  11. }
  12. #music-player {
  13. position: absolute;
  14. top: 85px;
  15. left: 140px;
  16. z-index: 99;
  17. height: 1.425em;
  18. width: 1.425em;
  19. font-size: 2em;
  20. font-family: emoji;
  21. padding: 0.125em;
  22. background: #C4D4FD;
  23. border-radius: 50%;
  24. background: -webkit-linear-gradient(-90deg, #fff, #FACDE0, #FACDE0 50px);
  25. -webkit-background-clip: text;
  26. -webkit-text-fill-color: transparent;
  27. -webkit-filter: drop-shadow(0px 0px 2px #424242CF);
  28. -webkit-animation: spin 2s linear infinite;
  29. -webkit-animation:spin 4s linear infinite;
  30. -moz-animation:spin 4s linear infinite;
  31. animation:spin 4s linear infinite;
  32. }
  33. @-moz-keyframes spin {
  34. 100% { -moz-transform: rotate(360deg); }
  35. }
  36. @-webkit-keyframes spin {
  37. 100% { -webkit-transform: rotate(360deg); }
  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. <div id="music-player" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">s</div>
  50. <script>
  51. document.getElementById("music-player").onclick = function() {
  52. var audio = document.getElementById("audio");
  53. if (audio.paused) audio.play();
  54. else audio.pause();
  55. };
  56. </script>
  57. <audio id="audio" src="https://dl.dropbox.com/s/yocrnipik2bokys/Fish.mp3"></audio>
Add Comment
Please, Sign In to add comment