Advertisement
imgirlrauhl

Music Player Tab #2 - vitanica

May 6th, 2014
6,602
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. ------------------------------------------------
  2. ------------------- CODE #1 --------------------
  3. ------------------------------------------------
  4.  
  5. #musicplayer {
  6. position: fixed;
  7. z-index: 99999999999999;
  8. bottom: 20px;
  9. left: 20px;
  10. width: 31px;
  11. height: 31px;
  12. -webkit-border-radius: 100%;
  13. -moz-border-radius: 100%;
  14. border-radius: 100%;
  15. background: #ff7373; /* icon background */
  16. -webkit-transition: all .7s ease;
  17. -moz-transition: all .7s ease;
  18. -o-transition: all .7s ease;
  19. transition: all .7s ease;
  20. }
  21.  
  22. #musicplayer img {
  23. width: 15px;
  24. padding: 8px 0px 0px 8px;
  25. }
  26.  
  27. #line {
  28. position:absolute;
  29. background: #ff7373; /* middle line color*/
  30. }
  31.  
  32. .line {
  33. top: 13px;
  34. left: 30px;
  35. width: 0px;
  36. height: 3px;
  37. -webkit-transition:all .4s ease;
  38. -moz-transition:all .4s ease;
  39. -o-transition:all .4s ease;
  40. transition-delay: 0s;
  41. -webkit-transition-delay: 0s;
  42. }
  43.  
  44. #musicplayer:hover .line {
  45. width: 20px;
  46. -webkit-transition-delay: 0s;
  47. }
  48.  
  49. .play {
  50. z-index: 9999;
  51. top: 0px;
  52. left: 50px;
  53. width: 140px;
  54. height: 0px;
  55. padding: 0px 5px 5px 5px;
  56. overflow: hidden;
  57. position: absolute;
  58. text-align: center;
  59. background: #ffffff; /* player background */
  60. border-left: 3px solid #ff7373; /* player border */
  61. opacity: 0;
  62. -webkit-transition: all .4s ease;
  63. -moz-transition: all .4s ease;
  64. -o-transition: all .4s ease;
  65. transition-delay: .4s;
  66. -webkit-transition-delay: .4s;
  67. }
  68.  
  69. #musicplayer:hover .play {
  70. height: 25px;
  71. opacity: 1;
  72. transition-delay: .6s;
  73. -webkit-transition-delay: .6s;
  74. }
  75.  
  76.  
  77.  
  78. ------------------------------------------------
  79. ------------------- CODE #2 --------------------
  80. ------------------------------------------------
  81.  
  82. <div id="musicplayer">
  83. <img src="http://static.tumblr.com/n9vj50j/cxEn20wqg/12.gif">
  84. <div id="line" class="line"></div>
  85. <div class="play">
  86. <!-- DELETE THIS LINE AND PASTE HERE THE CODE FROM BILLY MUSIC PLAYER! -->
  87. </div>
  88. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement