js+css实现一个中性的音乐播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:js+css实现一个中性的音乐播放器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /*____________________________________________________________ # Variables # Auxiliary styles # Container ## Player ### Music Switch ### Album ### Music Info ### Music Time ### Music Bar ### Music Order ### Music Control # @media ## @media 433px ## @media 414px ## @media 375px ## @media 320px ## @media Height 850px ## @media Height 690px ## @media Height 530px ## @media Height 360px ## @media Height 300px ## @media Height 230px ____________________________________________________________*/ /*____________________________________________________________ # Variables ____________________________________________________________*/ /*____________________________________________________________ # Auxiliary styles ____________________________________________________________*/ * { padding: 0; margin: 0; outline: none; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; } ::-webkit-scrollbar { width: 0; } /*____________________________________________________________ # Container ____________________________________________________________*/ .container { width: 100%; height: 100vh; background-color: #f5f6e7; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(""); } /*____________________________________________________________ ## Player ____________________________________________________________*/ .player { position: absolute; top: 50%; left: 50%; width: 433px; height: 814px; transform: translate(-50%, -50%); border-radius: 50px; background-color: #f5f6e7; box-shadow: -3px -3px 9px 0.1px #fff, 3px 3px 9px 0.1px #ccc; overflow: hidden; } .contentWrapper { position: absolute; top: 50%; left: 50%; width: 365px; height: 708px; transform: translate(-50%, -50%); } /*____________________________________________________________ ### Music Switch ____________________________________________________________*/ .musicSwitch { position: absolute; left: 50%; height: 44px; width: 340px; transform: translateX(-50%); } .musicSwitch ._prev, .musicSwitch ._next { width: 44px; height: 44px; } .musicSwitch ._prev { float: left; } .musicSwitch ._prev:before { background-position: 8px center; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd7efbb296.png"); } .musicSwitch ._next { float: right; } .musicSwitch ._next:before { background-position: 10px center; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd803210a6.png"); } .button { background: #f5f6e7; border-radius: 50%; box-shadow: -3px -3px 9px 0.1px #fff, 3px 3px 9px 0.1px #ccc; position: relative; cursor: pointer; } .button:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; background-color: #f5f6e7; width: 85%; height: 85%; display: inline-block; border-radius: 50%; box-shadow: -1px -1px 2px 0.1px #fff, 5px 5px 10px 0.1px #ccc; background-size: 50%; background-repeat: no-repeat; } .button:active:before { background-size: 49%; box-shadow: inset -3px -3px 5px 0.1px #fff, inset 3px 3px 5px 0.7px #ccc; } /*____________________________________________________________ ### Album ____________________________________________________________*/ .jerryHerman .album:before { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png); } .elvisPresley .album:before { background-image: url(//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png); } .album { position: absolute; top: 86px; left: 50%; transform: translateX(-50%); display: inline-block; width: 300px; height: 300px; border-radius: 100%; text-align: center; box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.15), -20px -20px 20px -10px white, -0.5px -0.5px 0 white, 0.5px 0.5px 0 rgba(0, 0, 0, 0.02); z-index: 5; background-color: #f5f6e7; } .album._pause:before { animation: rotateAlbum 15s linear infinite; } .album:before { position: absolute; content: ""; display: block; width: 85%; height: 85%; border-radius: inherit; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.3), inset -4px -4px 6px -1px rgba(0, 0, 0, 0.3); background-image: url("//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png"); background-size: cover; background-color: transparent; animation: rotateAlbum 15s linear infinite paused; } .album:after { position: absolute; content: ""; display: block; width: 70%; height: 70%; border-radius: inherit; left: 50%; top: 50%; background-color: rgba(0, 0, 0, 0.025); border: 1px solid rgba(0, 0, 0, 0.01); transform: translateX(-50%) translateY(-50%); box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.3), inset -4px -4px 6px -1px rgba(0, 0, 0, 0.3); } .album__internal { position: relative; margin-top: 45px; display: inline-block; width: 210px; height: 210px; border-radius: 100%; text-align: center; } .album__internal:before { position: absolute; content: ""; display: block; width: 80%; height: 80%; border-radius: inherit; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.3), inset -4px -4px 6px -1px rgba(0, 0, 0, 0.3); } @keyframes rotateAlbum { 0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { transform: translateX(-50%) translateY(-50%) rotate(-360deg); } } /*____________________________________________________________ ### Music Info ____________________________________________________________*/ .musicInfo { position: absolute; top: 451px; left: 50%; transform: translateX(-50%); width: 185px; height: 58px; } .musicInfo__name { font-family: sans-serif; font-size: 30px; text-align: center; font-weight: 500; margin-bottom: 8px; color: #424234; } .musicInfo__author { font-family: sans-serif; font-size: 15px; text-align: center; font-weight: 100; color: #a3a496; } /*____________________________________________________________ ### Music Time ____________________________________________________________*/ .musicTime { position: absolute; top: 544px; left: 50%; transform: translateX(-50%); width: 340px; height: 15px; } .musicTime__current, .musicTime__last { font-family: sans-serif; font-size: 15px; text-align: center; font-weight: 100; color: #a3a496; } .musicTime__current { float: left; } .musicTime__last { float: right; } /*____________________________________________________________ ### Music Bar ____________________________________________________________*/ .musicBar { position: absolute; top: 572px; left: 50%; transform: translateX(-50%); width: 340px; height: 7px; border-radius: 5px; background-color: #efefef; cursor: pointer; } .musicBar__length { display: block; width: 0%; background-color: #749064; height: 100%; border-radius: 5px; transition: width linear 200ms; } .musicBar__circle { margin-top: -10px; margin-right: -13px; width: 27px; height: 27px; display: block; float: right; border-radius: 50%; } .musicBar__circlePoint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background-color: #749064; } /*____________________________________________________________ ### Music Order ____________________________________________________________*/ .musicOrder { position: absolute; bottom: 22.5px; width: 100%; height: 22px; } .musicOrder__loop, .musicOrder__shuffle { background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; } .musicOrder__loop { float: left; } .musicOrder__shuffle { float: right; } .musicOrder__loop { width: 28.5px; height: 100%; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd78e51037.png"); } .musicOrder__loop._repeat { background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd7b09859f.png"); } .musicOrder__loop._off { opacity: 0.5; } .musicOrder__shuffle { width: 28.5px; height: 100%; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd7d49e14d.png"); opacity: 0.5; } .musicOrder__shuffle._shuffle { opacity: 1; } /*____________________________________________________________ ### Music Control ____________________________________________________________*/ .musicControl { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 255px; height: 67px; } .musicControl__play { background-color: #749064; box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.2), -6px -6px 10px -1px rgba(255, 255, 255, 0.05); } .musicControl__play._pause:before, .musicControl__play._play:before { background-repeat: no-repeat; background-size: 35%; } .musicControl__play._pause:before { background-position: 18px center; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd75149979.png"); } .musicControl__play._play:before { background-position: 20px center; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd76570bd6.png"); } .musicControl__play._play:active:before { background-size: 34%; } .musicControl__play:before { background-color: #749064; box-shadow: -1px -1px 2px 0.1px rgba(0, 0, 0, 0.2), 5px 5px 10px 0.1px rgba(0, 0, 0, 0.2); } .musicControl__play:active:before { box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.2); } .musicControl__backward, .musicControl__play, .musicControl__forward { display: block; float: left; } .musicControl__backward, .musicControl__play { margin-right: 27px; } .musicControl__backward, .musicControl__play, .musicControl__forward { width: 67px; height: 67px; } .musicControl__backward:before { background-position: 12px center; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd70fa5ed5.png"); } .musicControl__forward:before { background-position: 16px center; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ecd73001ab7.png"); } /*____________________________________________________________ # @media ____________________________________________________________*/ /*____________________________________________________________ ## @media 433px ____________________________________________________________*/ @media screen and (max-width: 433px) { .player { width: 414px; height: 736px; } .contentWrapper { width: 350px; height: 677px; } .musicSwitch { height: 42px; width: 325px; } .musicSwitch ._prev, .musicSwitch ._next { width: 42px; height: 42px; } .musicSwitch ._prev:before { background-position: 7px center; } .musicSwitch ._next:before { background-position: 9px center; } .album { top: 82px; width: 287px; height: 287px; } .album__internal { margin-top: 43px; width: 201px; height: 201px; } .musicInfo { top: 431px; width: 177px; height: 55px; } .musicInfo__name { font-size: 28px; margin-bottom: 7px; } .musicInfo__author { font-size: 14px; } .musicTime { top: 520px; width: 325px; height: 14px; } .musicTime__current, .musicTime__last { font-size: 14px; } .musicBar { top: 547px; width: 325px; height: 7px; } .musicBar__length { transition: width linear 175ms; } .musicBar__circle { margin-top: -9.5px; margin-right: -12px; width: 26px; height: 26px; } .musicBar__circlePoint { width: 10.5px; height: 10.5px; } .musicOrder { bottom: 21.5px; height: 21px; } .musicOrder__loop, .musicOrder__shuffle { width: 27px; } .musicControl { width: 244px; height: 64px; } .musicControl__play._pause:before { background-position: 17px center; } .musicControl__play._play:before { background-position: 19px center; } .musicControl__backward, .musicControl__play { margin-right: 26px; } .musicControl__backward, .musicControl__play, .musicControl__forward { width: 64px; height: 64px; } .musicControl__backward:before { background-position: 11px center; } .musicControl__forward:before { background-position: 15px center; } .social { display: none; } } /*____________________________________________________________ ## @media 414px ____________________________________________________________*/ @media screen and (max-width: 414px) { .container { background-image: none; } .player { border-radius: 0; box-shadow: none; } } /*____________________________________________________________ ## @media 375px ____________________________________________________________*/ @media screen and (max-width: 375px) { .player { width: 375px; height: 667px; } .contentWrapper { width: 316px; height: 613px; } .musicSwitch { height: 38px; width: 294px; } .musicSwitch ._prev, .musicSwitch ._next { width: 38px; height: 38px; } .musicSwitch ._prev:before { background-position: 7px center; } .musicSwitch ._next:before { background-position: 8.6px center; } .album { top: 74.5px; width: 260px; height: 260px; } .album__internal { margin-top: 39px; width: 182px; height: 182px; } .musicInfo { top: 390px; width: 160px; height: 50px; } .musicInfo__name { font-size: 26px; margin-bottom: 7px; } .musicInfo__author { font-size: 13px; } .musicTime { top: 471px; width: 294px; height: 13px; } .musicTime__current, .musicTime__last { font-size: 13px; } .musicBar { top: 497px; width: 294px; height: 6px; } .musicBar__circle { margin-top: -8.6px; margin-right: -11px; width: 23px; height: 23px; } .musicBar__circlePoint { width: 9.5px; height: 9.5px; } .musicOrder { bottom: 19.5px; height: 19px; } .musicOrder__loop, .musicOrder__shuffle { width: 25px; } .musicControl { width: 221px; height: 58px; } .musicControl__play._pause:before { background-position: 15.5px center; } .musicControl__play._play:before { background-position: 17px center; } .musicControl__backward, .musicControl__play { margin-right: 23.4px; } .musicControl__backward, .musicControl__play, .musicControl__forw.........完整代码请登录后点击上方下载按钮下载查看
网友评论0