jquery实现手机端移动端qq音乐播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:jquery实现手机端移动端qq音乐播放器效果代码,带歌词滚动显示效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
p{
margin: 0;
padding: 0;
}
#qqMain{
width: 100%;
height: 100%;
//background-image: linear-gradient(white, gray);
background-image: -webkit-linear-gradient(top, #eee, #2e2e2e);
}
.img{
margin:0 auto;
width:100%;
height:auto;
overflow:hidden;
position: absolute;
top: 5%;
text-align: center;
}
.img img{
display:block;
width:60%;
height:auto;
margin:0 auto;
border-radius:50% ;
border: 5px solid #fff;
}
.rainbow{animation: 6s rainbow infinite linear;}
@keyframes rainbow {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.btnpic{
width: 40px;
height: 40px;
position: absolute;
top: 80%;
left: 50%;
right: 50%;
margin-left: -30px;
border-radius: 70px;
background: url(data:image/jpeg;base64,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.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0