plyr实现一个水纹波动背景的音乐播放器代码
代码语言:html
所属分类:多媒体
代码描述:plyr实现一个水纹波动背景的音乐播放器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/plyr2.0.13.css"> <style> @import url("https://fonts.googleapis.com/css?family=Oxygen:300,400,700"); html, body { height: 100%; } body { background: radial-gradient(ellipse at center, #2d2d2d 0%, #2d2d2d 35%, #2d2d2d 100%); overflow: hidden; } .ocean { height: 5%; width: 100%; position: absolute; bottom: 0; left: 0; background: #015871; } .wave { background: url(//repo.bfw.wiki/bfwrepo/images/card/wave.svg) repeat-x; position: absolute; top: -198px; width: 6400px; height: 198px; animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0); } .wave:nth-of-type(2) { top: -175px; animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite; opacity: 1; } @keyframes wave { 0% { margin-left: 0; } 100% { margin-left: -1600px; } } @keyframes swell { 0%, 100% { transform: translate3d(0, -25px, 0); } 50% { transform: translate3d(0, 5px, 0); } } /* Font Family ================================================== */ /* Global Styles ================================================== */ html, body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background-color: #2d2d2d; color: #fff; font-size: 105%; font-family: "Oxygen", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.025rem; line-height: 1.618; padding: 1rem 0; } * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } /* Setup ================================================== */ .container { position: relative; margin: 0 auto; max-width: 800px; width: 100%; } .column { width: inherit; } /* Typography / Links ================================================== */ p { color: #fff; display: block; font-size: 0.9rem; font-weight: 400; margin: 0 0 2px; } a, a:visited { color: #8cc3e6; outline: 0; text-decoration: underline; } a:hover, a:focus { color: #bbdef5; } p a, p a:visited { line-height: inherit; } /* Misc. ================================================== */ .add-bottom { margin-bottom: 2rem !important; } .left { float: left; } .right { float: right; } .center { text-align: center; } /* Audio Player Styles ================================================== */ audio { margin: 0 15px 0 14px; width: 670px; } #audiowrap, #plwrap { margin: 0 auto; } #tracks { position: relative; text-align: center; } #nowPlay { display: inline; } #npAction { padding: 21px; position: absolute; } #npTitle { padding: 21px; } #plList li { cursor: pointer; display: block; margin: 0; padding: 21px 0; } #plList li:hover { background-color: rgba(0, 0, 0, 0.1); } .plItem { position: relative; } .plTitle { left: 50px; overflow: hidden; position: absolute; right: 65px; text-overflow: ellipsis; top: 0; white-space: nowrap; } .plNum { padding-left: 21px; width: 25px; } .plLength { padding-left: 21px; position: absolute; right: 21px; top: 0; } .plSel, .plSel:hover { background-color: rgba(0, 0, 0, 0.1); color: #fff; cursor: default !important; } a[id^=btn] { border-radius: 3px; color: #fff; cursor: pointer; display: inline-block; font-size: 2rem; height: 35px; line-height: 0.8; margin: 0 20px 20px; padding: 5px 10px; text-decoration: none; transition: background 0.3s ease; width: 35px; } a[id^=btn]:last-child { margin-left: -4px; } a[id^=btn]:hover, a[id^=btn]:active { background-color: rgba(0, 0, 0, 0.1); color: #fff; } a[id^=btn]::-moz-focus-inner { border: 0; padding: 0; } /* Plyr Overrides ================================================== */ .plyr--audio .plyr__controls { background-color: transparent; border: none; color: #fff; padding: 20px 20px 20px 13px; width: 100%; } .plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large { background: rgba(0, 0, 0, 0.1); } .plyr__progress--played, .plyr__volume--display { color: rgba(0, 0, 0, 0.1); } .plyr--audio .plyr__progress--buffer, .plyr--audio .plyr__volume--display { background: rgba(0, 0, 0, 0.1); } .plyr--audio .plyr__progress--buffer { color: rgba(0, 0, 0, 0.1); } /* Media Queries ================================================== */ @media only screen and (max-width: 850px) { #nowPlay { display: none; } } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { border: 0px solid white; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: white; border-radius: 10px; } </style> </head> <body> <div class="ocean.........完整代码请登录后点击上方下载按钮下载查看
网友评论0