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!Ā
vaporwave
tangentwithtanner
yousharknotpass
turnnoffyourmind
kianamaiart
dailybridgerton
