admin 管理员组文章数量: 887021
2023年12月21日发(作者:检视剖析材料)
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display:block;}body {line-height:1;}ol, ul {list-style:none;}blockquote, q {quotes:none;}
.player {width:375px;height:550px;background-color:#2b2b2b;border-radius:10px;position:relative;}.player .header {padding:15px 0;text-align:center;}.player .albumPic {background-size:cover;width:270px;height:270px;margin:auto;border-radius:10px;}.player .trackInfo {text-align:center;padding:20px 0 15px;font-size:14px;white-space:nowrap;}.player .trackInfo .name {font-size:24px;margin-bottom:10px;font-weight:bold;}.player .progress {width:0;height:20%;position:absolute;bottom:0;
left:0;background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0), #0099ff);background-image:linear-gradient(top, rgba(255, 255, 255, 0), #0099ff);border-bottom-left-radius:10px;border-bottom-right-radius:10px;opacity:.4;}.player .controls {position:relative;}.player .controls .play {cursor:pointer;width:75px;height:75px;border:2px solid #ccc;border-radius:50%;margin:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#fff;font-size:35px;}.player .controls .play:hover {font-size:40px;
}.player .controls .previous {cursor:pointer;position:absolute;top:25px;font-size:30px;left:60px;}.player .controls .previous:hover {font-size:32px;}.player .controls .next {cursor:pointer;position:absolute;top:25px;font-size:30px;right:60px;}.player .controls .next:hover {font-size:32px;}.player .time {width:335px;display:-webkit-box;display:-webkit-flex;
版权声明:本文标题:HTML在线播放音乐实例,一步一步实战HTML音乐播放器(示例代码) 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1703144556h439814.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论