css+js实现中性简洁音乐播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:css+js实现中性简洁音乐播放器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Acme&display=swap"); html { font-size: 10px; } * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #E5F3FE; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; letter-spacing: 1px; font-family: 'Acme', sans-serif; } .player { height: 35rem; width: 60rem; background: #E5F3FE; box-shadow: 5px 5px 10px #cee3f2, -5px -5px 10px #faffff; border-radius: 11rem; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .song-heading .title { font-size: 2rem; font-weight: 600; color: #5881F3; letter-spacing: 0.4px; } .song-heading .album-name { text-align: center; font-size: 1.5rem; margin-top: 1rem; font-weight: 600; color: #858b90; } .music-controls { display: flex; width: 95%; justify-content: space-evenly; align-items: center; } .music-controls .repeat { cursor: pointer; width: 3rem; height: 3rem; } .music-controls .repeat svg { transform: rotate(45deg); } .music-controls .repeat path { fill: #5C87FE; } .music-controls .previous, .music-controls .next { cursor: pointer; width: 6rem; height: 6rem; box-shadow: 5px 5px 10px #cee3f2, -5px -5px 10px #faffff; padding: 1rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .music-controls .previous.pressed, .music-controls .next.pressed { box-shadow: inset 5px 5px 10px #cee3f2, inset -5px -5px 10px #faffff; } .music-controls .previous svg, .music-controls .next svg { width: 2rem; height: 2rem; } .music-controls .previous svg path, .music-controls .next svg path { fill: #5C87FE; } .music-controls .previous svg rect, .music-controls .next svg rect { fill: #5C87FE; } .music-controls .play { cursor: pointer; background-color: #5C87FE; padding: 2rem; border-radius: 50%; display: flex; align-items: center; box-shadow: 6px 5px 9px 0px #a5c6ec; } .music-controls .play svg { width: 4rem; height: 4rem; } .music-controls .play svg path { fill: #fff; } .music-controls .play.pressed { box-shadow: none; } .music-controls .favorite { cursor: pointer; } .music-controls .favorite.pressed svg path { fill: #e74c3c; } .audio-control { width: 85%; height: 6px; border-radius: 2px; background: #E5F3FE; box-shadow: 5px 5px 7px 0px #c7dcec, -7px -7px 8px #f2ffff; margin: 4px auto; cursor: pointer; margin-top: 20px; } .audio-control .audio-progress { width: 20%; height: 100%; border-radius: 2px; position: relative; background-color: #5C87FE; } .audio-control .audio-progress:after { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 3px solid #5C87FE; background-color: #fff; position: absolute; top: -4px; right: -5px; } .audio-duration { margin-top: -30px; display: flex; width: 84%; font-size: 1.4rem; font-weight: 600; color: #A1A1A1; letter-spacing: 1px; } .audio-duration .start { flex: 1; } .edge { width: 10rem; height: 7px; background: #E5F3FE; border-radius: 10px; box-shadow: 5px 5px 7px 0px #c7dcec, -7px -7px 8px #f2ffff; } .hide { display: none; } </style> </head> <body> <div class="music-wrapper"> <div class="player"> <div class="song-heading"> <div class="title">No Tears left to cry</div> <div class="album-name">Ariana Grande</div> </div> <div class="music-controls"> <div class="repeat"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="1" id="_1"> <path d="M102.59,341.42a15,15,0,0,1-13.42-8.28,187.41,187.41,0,0,1,35.11-216.86c73.18-73.19,192.26-73.19,265.44,0a15,15,0,0,1-21.21,21.21C307,76,207,76,145.49,137.49A157.45,157.45,0,0,0,116,319.69a15,15,0,0,1-13.4,21.73Z"/> <path d="M257,436.61a187.1,187.1,0,0,1-132.72-54.88,15,15,0,1,1,21.21-21.22C207,422,307,422,368.51,360.51A157.45,157.45,0,0,0,398,178.31a15,15,0,0,1,26.82-13.45A187.62,187.62,0,0,1,257,436.61Z"/> <path d="M315.21,148.25a15,15,0,0,1-1.47-29.92l47.43-4.73-9.51-47.67a15,15,0,0,1,29.42-5.86L393.82,124a15,15,0,0,1-13.22,17.86l-63.88,6.37C316.21,148.23,315.71,148.25,315.21,148.25Z"/> <path d="M147.61,450a15,15,0,0,1-14.7-12.07l-12.74-63.88a15,15,0,0,1,13.23-17.86l63.88-6.37a15,15,0,0,1,3,29.85l-47.43,4.73,9.5,47.67A15,15,0,0,1,147.61,450Z"/></g> </svg></div> <div class="previous"> <svg xmlns="http://www.w3.org/2000/svg" width="38" height="36" viewBox="0 0 38 36"> <g> <path class="a" d="M33,.68l-18.51,15a3,3,0,0,0,0,4.74L33,35.32A3,3,0,0,0,38,33V3.05A3,3,0,0,0,33,.68Z"/> <rect class="a" width="10" height="36" rx="3" ry="3"/> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0