Advertisement
powys

circle + expand on hover music player~!

Jul 14th, 2021
7,183
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.54 KB | None | 0 0
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  2. <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  3.  
  4. <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  5.  
  6. <!-------MUSIC PLAYER BY GLENTHEMES------->
  7.  
  8. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  9. <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  10.  
  11. <style>
  12.  
  13. #ongaku {
  14. position:fixed;
  15. bottom:15px;
  16. left:15px;
  17. width:35px;
  18. height:35px;
  19. z-index:9999;
  20. border:4px double #000; /*Border Colour*/
  21. background-color:#fff; /*Music Tab Background Colour*/
  22. border-radius:30px;
  23. opacity:.6;
  24. -webkit-transition: all 0.6s ease-in-out;
  25. -moz-transition: all 0.6s ease-in-out;
  26. -ms-transition: all 0.6s ease-in-out;
  27. -o-transition: all 0.6s ease-in-out;
  28. transition: all 0.6s ease-in-out;
  29. }
  30.  
  31. #gaku {
  32. width:24px;
  33. height:24px;
  34. margin-top:3px;
  35. margin-left:3px;
  36. overflow:hidden;
  37. -webkit-transition: all 0.6s ease-in-out;
  38. -moz-transition: all 0.6s ease-in-out;
  39. -ms-transition: all 0.6s ease-in-out;
  40. -o-transition: all 0.6s ease-in-out;
  41. transition: all 0.6s ease-in-out;
  42. }
  43.  
  44. #kero {
  45. height:26px;
  46. }
  47.  
  48. #kero img {
  49. margin-right:10px;
  50. margin-left:3px;
  51. margin-top:3px;
  52. }
  53.  
  54. #kero embed {
  55. margin-top:-5px;
  56. }
  57.  
  58. #kero embed, #kero {
  59. -webkit-transition: all 0.6s ease-in-out;
  60. -moz-transition: all 0.6s ease-in-out;
  61. -ms-transition: all 0.6s ease-in-out;
  62. -o-transition: all 0.6s ease-in-out;
  63. transition: all 0.6s ease-in-out;
  64. }
  65.  
  66. #ongaku:hover {
  67.  
  68. width:80px;
  69. }
  70.  
  71. #ongaku:hover #gaku {
  72. width:74px;
  73. }
  74.  
  75. #ongaku:hover #kero {
  76. margin-left:-50px;
  77. }
  78.  
  79. .playy, .pausee {
  80. margin-left:7px;
  81. margin-top:4px;
  82. position:relative;
  83. left:20px;
  84. font-size:15px;
  85. color:#FEE6ED; /* play & pause buttons color */
  86. cursor:pointer;
  87. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  88.  
  89. }
  90.  
  91. .pausee {display:none;}
  92.  
  93. </style>
  94. <div id="ongaku"><div id="gaku"><div id="kero">
  95. <table cellspacing"0" cellpadding="0"><tr><td>
  96. <!-- Music Gif URL Here (Replace the Link)--><img src=" https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"></td><td>
  97. <!-- Music Code Here -->
  98.  
  99. <div class="music-controls" onclick="songstart();">
  100. <div class="playy">►</div>
  101. <div class="pausee">♪</div>
  102. </a>
  103. <audio id="tune" src="https://dl.dropbox.com/s/qcboct0um8yamnf/Girl%27s%20Day%20%28%EA%B1%B8%EC%8A%A4%EB%8D%B0%EC%9D%B4%29%20-%20Darling%20%28%EB%8B%AC%EB%A7%81%29%20Color%20Coded%20Lyrics%20HANENGROM%20%EA%B0%80%EC%82%AC.mp3"audio"></audio>
  104.  
  105. </td></tr>
  106. </table>
  107. </div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement