My imagination are strong enough for me to hold on.
Hello 2017

#Tutorial: Hidden MusicPlayer 2
Saturday 21 May 2016 @ 02:54


 



大家好
上一个小编介绍一款隐藏版的mp3 player
这一款稍微不一样
这个教程是在fukuo那边拿来的哦
来看看吧


步骤
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找</head>
3.在</head>之前放
#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;
}
-size和颜色可以自行更换哦
4.Ctrl+F(Command+F用Mac的)找</body>
5.在</body>之前放
<div id="music-rounded">
    <center><img src="http://66.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>
MUSIC PLAYER CODE HERE=放你的mp3在那里
6.Save，成功的话就恭喜啦 ^-^



Labels: