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