Music Player Techno by Fukuo
I’ve been trying to find the style of Music Player, I had before. Now, I am going to share my experiment what I’ve done. As you can see, this is more complicated and is relatively different from my music tab, earlier. Just try to adjust the position of the music player if the position is not fit with your taste!
HTML:Creating the Music Player!
As usual, try to insert this code under the ‘<body>’ tags!
<div id="music-rounded"> <center><img src="https://64.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"></center> <div class="music-border"></div> <div class="music-player-embed"> <center>MUSIC PLAYER CODE HERE</center> </div> </div>
CSS:Styling the Music Player!
And then, put this code between <style type=”text/css”> and </style>
#music-rounded { position:fixed; left:75px; top:150px; width:50px; height:50px; background-color:#000; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; opacity:1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } #music-rounded img { margin-top:17px; margin-left:-2px; } #music-rounded:hover .music-player-embed { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-top:-20px; opacity:1; background-color:#000; color:#fff; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; transition: all 0.7s ease; } .music-border { position:absolute; margin-top:-42px; margin-left:-15px; border:10px solid rgba(0, 0, 0, 0.4); width:60px; height:59px; background-color:none; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .music-border:hover { margin-top:-48px; margin-left:-20px; border:15px solid rgba(0, 0, 0, 0.4); -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; transition: all 0.7s ease; -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -o-transform: rotateY(360deg); } .music-player-embed { font-family:Consolas; font-size:11px; position:absolute; min-width:100px; background-color:#FFF; padding:9px; margin-left:90px; margin-top:0px; overflow:hidden; opacity:0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; transition: all 0.7s ease; }
And, WA-LA! I hope you all like it! I was trying to make it with my sincerity from my knowledge of HTML and CSS—any form of Credit, Like and Reblog are appreciated!
izzy806
kianamaiart
turnnoffyourmind
jbbartram-illu
tangentwithtanner
gummygunk
origamiaround