jquery+css实现多媒体列表音乐播放器效果代码

代码语言:html

所属分类:多媒体

代码描述:jquery+css实现多媒体列表音乐播放器效果代码,可控制音乐播放暂停,上下首切换,进度显示,封面图片跟随。

代码标签: jquery css 多媒体 列表 音乐 播放器

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
   
<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
<style>
   
*:focus {
 
outline: none;
}

body
{
 
font-family: Helvetica, Arial;
 
margin: 0;
 
background-color: #162529;
}

#app-cover {
 
position: absolute;
 
top: 50%;
 
right: 0;
 
left: 0;
 
width: 430px;
 
height: 100px;
 
margin: -4px auto;
}

#bg-artwork {
 
position: fixed;
 
top: -30px;
 
right: -30px;
 
bottom: -30px;
 
left: -30px;
 
background-image: url("https://raw.githubusercontent.com/Rakib403/slam-/main/logo%20yt-01.jpg");
 
background-repeat: no-repeat;
 
background-size: cover;
 
background-position: 50%;
 
filter: blur(40px);
 
-webkit-filter: blur(40px);
 
z-index: 1;
}

#bg-layer {
 
position: fixed;
 
top: 0;
 
right: 0;
 
bottom: 0;
 
left: 0;
 
background-color: #162529;
 
opacity: 0.51;
 
z-index: 2;
}

#player {
 
position: relative;
 
height: 100%;
 
z-index: 3;
}

#player-track {
 
position: absolute;
 
top: 0;
 
right: 15px;
 
left: 15px;
 
padding: 13px 22px 10px 184px;
 
background-color: #1C1F2B;
 
border-radius: 15px 15px 0 0;
 
transition: 0.3s ease top;
 
z-index: 1;
}

#player-track.active {
 
top: -92px;
}

#album-name {
 
color: #54576f;
 
font-size: 17px;
 
font-weight: bold;
}

#track-name {
 
color: #acaebd;
 
font-size: 13px;
 
margin: 2px 0 13px 0;
}

#track-time {
 
height: 12px;
 
margin-bottom: 3px;
 
overflow: hidden;
}

#current-time {
 
float: left;
}

#track-length {
 
float: right;
}

#current-time,
#track-length {
 
color: transparent;
 
font-size: 11px;
 
background-color: #1C1F2B;
 
border-radius: 10px;
 
transition: 0.3s ease all;
}

#track-time.active #current-time,
#track-time.active #track-length {
 
color: #f86d92;
 
background-color: transparent;
}

#s-area,
#seek-bar {
 
position: relative;
 
height: 4px;
 
border-radius: 4px;
}

#s-area {
 
background-color: #202B1C;
 
cursor: pointer;
}

#ins-time {
 
position: absolute;
 
top: -29px;
 
color: #fff;
 
font-size: 12px;
 
white-space: pre;
 
padding: 5px 6px;
 
border-radius: 4px;
 
display: none;
}

#s-hover {
 
position: absolute;
 
top: 0;
 
bottom: 0;
 
left: 0;
 
opacity: 0.2;
 
z-index: 2;
}

#ins-time,
#s-hover {
 
background-color: #3b3d50;
}

#seek-bar {
 
content: "";
 
position: absolute;
 
top: 0;
 
bottom: 0;
 
left: 0;
 
width: 0;
 
background-color: #241C2B;
 
transition: 0.2s ease width;
 
z-index: 1;
}

#player-content {
 
position: relative;
 
height: 100%;
 
background-color: #fff;
 
box-shadow: 0 30px 80px #162916;
 
border-radius: 15px;
 
z-index: 2;
}

#album-art {
 
position: absolute;
 
top: -40px;
 
width: 115px;
 
height: 115px;
 
margin-left: 40px;
 
transform: rotateZ(0);
 
transition: 0.3s ease all;
 
box-shadow: 0 0 0 10px #0E1323;
 
border-radius: 50%;
 
overflow: hidden;
}

#album-art.active {
 
top: -60px;
 
box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}

#album-art:before {
 
content: "";
 
position: absolute;
 
top: 50%;
 
right: 0;
 
left: 0;
 
width: 20px;
 
height: 20px;
 
margin: -10px auto 0 auto;
 
background-color: #d6dee7;
 
border-radius: 50%;
 
box-shadow: inset 0 0 0 2px #fff;
 
z-index: 2;
}

#album-art img {
 
display: block;
 
position: absolute;
 
top: 0;
 
left: 0;
 
width: 100%;
 
height: 100%;
 
opacity: 0;
 
z-index: -1;
}

#album-art img.active {
 
opacity: 1;
 
z-index: 1;
}

#album-art.active img.active {
 
z-index: 1;
 
-webkit-animation: rotateAlbumArt 3s linear 0s infinite forwards;
         
animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

@-webkit-keyframes rotateAlbumArt {
 
0% {
   
transform: rotateZ(0);
 
}
 
100% {
   
transform: rotateZ(360deg);
 
}
}

@keyframes rotateAlbumArt {
 
0% {
   
transform: rotateZ(0);
 
}
 
100% {
   
transform: rotateZ(360deg);
 
}
}

#buffer-box {
 
position: absolute;
 
top: 50%;
 
right: 0;
 
left: 0;
 
height: 13px;
 
color: #1f1f1f;
 
font-size: 13px;
 
font-family: Helvetica;
 
text-align: center;
 
font-weight: bold;
 
line-height: 1;
 
padding: 6px;
 
margin: -12px auto 0 auto;
 
background-color: rgba(255, 255, 255, 0.19);
 
opacity: 0;
 
z-index: 2;
}

#album-art img,
#buffer-box {
 
transition: 0.1s linear all;
}

#album-art.buffering img {
 
opacity: 0.25;
}

#album-art.buffering img.active {
 
opacity: 0.8;
 
filter: blur(2px);
 
-webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box {
 
opacity: 1;
}

#player-controls {
 
width: 250px;
 
height: 100%;
 
margin: 0 5px 0 141px;
 
float: right;
 
overflow: hidden;
}

.control {
 
width: 33.333%;
 
float: left;
 
padding: 12px 0;
}

.button {
 
width: 26px;
 
height: 26px;
 
padding: 25px;
 
background-color: #1C2B27;
 
border-radius: 6px;
 
cursor: pointer;
}

.button i {
 
display: block;
 
color: #d6dee7;
 
font-size: 26px;
 
text-align: center;
 
line-height: 1;
}

.button,
.button i {
 
transition: 0.2s ease all;
}

.button:hover {
 
background-color: #1C2B27;
}

.button:hover i {
 
color: #1C202C;
}
</style>
</head>

<body>

   
<div id="app-cover">
       
<div id="bg-artwork"></div>
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0