Advertisement
vongolacloud18

Slide-- Music Player (CSS)

Sep 18th, 2013
8,644
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.34 KB | None | 0 0
  1.  
  2. #ongaku {
  3. position:fixed;
  4. bottom:15px;
  5. left:15px;
  6. width:30px;
  7. height:30px;
  8. z-index:9999;
  9. border:4px double #ccc; /*Border Colour*/
  10. background-color:#fff; /*Music Tab Background Colour*/
  11. border-radius:30px;
  12. opacity:.6;
  13. -webkit-transition: all 0.6s ease-in-out;
  14. -moz-transition: all 0.6s ease-in-out;
  15. -ms-transition: all 0.6s ease-in-out;
  16. -o-transition: all 0.6s ease-in-out;
  17. transition: all 0.6s ease-in-out;
  18. }
  19.  
  20. #gaku {
  21. width:24px;
  22. height:24px;
  23. margin-top:3px;
  24. margin-left:3px;
  25. overflow:hidden;
  26. -webkit-transition: all 0.6s ease-in-out;
  27. -moz-transition: all 0.6s ease-in-out;
  28. -ms-transition: all 0.6s ease-in-out;
  29. -o-transition: all 0.6s ease-in-out;
  30. transition: all 0.6s ease-in-out;
  31. }
  32.  
  33. #kero {
  34. height:26px;
  35. }
  36.  
  37. #kero img {
  38. margin-right:10px;
  39. margin-left:3px;
  40. margin-top:3px;
  41. }
  42.  
  43. #kero embed {
  44. margin-top:-5px;
  45. }
  46.  
  47. #kero embed, #kero {
  48. -webkit-transition: all 0.6s ease-in-out;
  49. -moz-transition: all 0.6s ease-in-out;
  50. -ms-transition: all 0.6s ease-in-out;
  51. -o-transition: all 0.6s ease-in-out;
  52. transition: all 0.6s ease-in-out;
  53. }
  54.  
  55. #ongaku:hover {
  56. opacity:1;
  57. width:80px;
  58. }
  59.  
  60. #ongaku:hover #gaku {
  61. width:74px;
  62. }
  63.  
  64. #ongaku:hover #kero {
  65. margin-left:-50px;
  66. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement