Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ------------------------------------------------
- ------------------- CODE #1 --------------------
- ------------------------------------------------
- #musicplayer {
- position: fixed;
- z-index: 99999999999999;
- bottom: 20px;
- left: 20px;
- width: 31px;
- height: 31px;
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
- background: #ff7373; /* icon background */
- -webkit-transition: all .7s ease;
- -moz-transition: all .7s ease;
- -o-transition: all .7s ease;
- transition: all .7s ease;
- }
- #musicplayer img {
- width: 15px;
- padding: 8px 0px 0px 8px;
- }
- #line {
- position:absolute;
- background: #ff7373; /* middle line color*/
- }
- .line {
- top: 13px;
- left: 30px;
- width: 0px;
- height: 3px;
- -webkit-transition:all .4s ease;
- -moz-transition:all .4s ease;
- -o-transition:all .4s ease;
- transition-delay: 0s;
- -webkit-transition-delay: 0s;
- }
- #musicplayer:hover .line {
- width: 20px;
- -webkit-transition-delay: 0s;
- }
- .play {
- z-index: 9999;
- top: 0px;
- left: 50px;
- width: 140px;
- height: 0px;
- padding: 0px 5px 5px 5px;
- overflow: hidden;
- position: absolute;
- text-align: center;
- background: #ffffff; /* player background */
- border-left: 3px solid #ff7373; /* player border */
- opacity: 0;
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- transition-delay: .4s;
- -webkit-transition-delay: .4s;
- }
- #musicplayer:hover .play {
- height: 25px;
- opacity: 1;
- transition-delay: .6s;
- -webkit-transition-delay: .6s;
- }
- ------------------------------------------------
- ------------------- CODE #2 --------------------
- ------------------------------------------------
- <div id="musicplayer">
- <img src="http://static.tumblr.com/n9vj50j/cxEn20wqg/12.gif">
- <div id="line" class="line"></div>
- <div class="play">
- <!-- DELETE THIS LINE AND PASTE HERE THE CODE FROM BILLY MUSIC PLAYER! -->
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement