迷你音乐播放器
代码语言:html
所属分类:多媒体
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .icon { display: inline-block; width: 2em; height: 2em; font-size: 30px; fill: #D7DCE2; transition: all .2s ease-in-out; } html, body { height: 100%; } body { background: #ffeff5; position: relative; } .player { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .player.play .player__timeline { -webkit-transform: translateY(-90%); transform: translateY(-90%); } .player.play .player__album:after { box-shadow: 0px 30px 28px -10px rgba(0, 0, 0, 0.2); } .player.play .player__album { top: -65px; } .player.play .pause { display: inline-block; } .player.play .play { display: none; } .player__album { width: 112px; height: 112px; border-radius: 50%; margin-right: 22px; position: relative; top: -50px; transition: all .4s ease-in-out; } .player__album:before { content: ''; width: 25px; height: 25px; position: absolute; z-index: 3; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #fff; border-radius: 50%; } .player__album:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; box-shadow: none; transition: all .3s ease-in-out; } .player__albumImg { background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; border-radius: 50%; position: relative; z-index: 2; display: none; } .player__albumImg.active-song { display: block; } .player__bar { background: #fff; padding: 10px 25px; height: 100px; display: flex; justify-content: space-between; border-radius: 15px; box-shadow: 0 30px 56px 6px rgba(0, 0, 0, 0.1); position: relative; z-index: 3; } .player__controls { display: flex; align-items: center; } .player__prev { -webkit-transform: rotate(180deg); transform: rotate(180deg); height: 80px; width: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 15px; transition: all .2s ease-in-out; margin-right: 3px; } .player__prev:hover { background: #D7DCE2; } .player__prev:hover svg { fill: #fff; } .player__play { cursor: pointer; height: 80px; width: 80px; display: flex; justify-content: center; align-items: center; border-radius: 15px; transition: all .2s ease-in-out; margin-right: 3px; position: relative; } .player__play:hover { background: #D7DCE2; } .player__play:hover svg { fill: #fff; } .player__play svg { font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .player__play svg.pause { display: none; } .player__next { cursor: pointer; height: 80px; width: 80px; display: flex; justify-content: center; align-items: center; border-radius: 15px; transition: all .2s ease-in-out; margin-left: -8px; } .player__next:hover { background: #D7DCE2; } .player__next:hover svg { fill: #fff; } .player__timeline { background: #fff6fb; height: 95px; border-radius: 15px; position: absolute; bottom: 0; left: 10px; right: 10px; -webkit-transform: translateY(0); transform: translateY(0); transition: all .3s ease-in-out; z-index: 1; padding-left: 160px; flex-direction: column; justify-content: center; } .player__timelineBar { background: #E7E7E7; width: 95%; height: 4px; border-radius: 15px; margin-top: 13px; position: relative; } .player #playhead { position: absolute; top: 0; left: 0; border-radius: 15px; width: 0; height: 100%; background: #fd6d94; } .player__author { line-height: 1; font-weight: bold; margin-bottom: 6px; margin-top: 15px; } .player__song { line-height: 1; margin: 0; font-size: 12px; color: #949494; } </style> </head> <body translate="no"> <div class="player"> <div class="player__bar"> <div class="player__album"> <div class="player__albumImg active-song" data-author="Khalid" data-song="Location" data data-src="http://repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" style="background-image: url(http://repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90"> </div> <div class="player__albumImg" data-author="Khalid" data-song="Angels" data data-src="http://repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" style="background-image: url(http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90"> </div> </div> <div class="player__controls"> <div class="player__prev"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z" /><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z" /><g><path d="M55.5 34.434v31.132l27.805-15.568z" /><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z" /></g></svg> </div> <div class="player__play"> <svg class="icon play.........完整代码请登录后点击上方下载按钮下载查看
网友评论0