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, .musicContr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0