js+css实现简洁的音乐播放器效果代码-html代码-BFW代码库

js+css实现简洁的音乐播放器效果代码

代码语言：html

所属分类：多媒体

代码描述：js+css实现简洁的音乐播放器效果代码，包含播放、下一首、上一首、进度显示、歌名显示、专辑照片等。

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

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

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

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *:focus
    {
        outline: none;
    }
    
    body
    {
        font-family: Helvetica, Arial;
        margin: 0;
        background-color: #ffeff5;
    }
    
    #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;
       
       
        filter: blur(40px);
        -webkit-filter: blur(40px);
        z-index: 1;
    }
    
    #bg-layer
    {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #fff;
        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: #fff7f7;
        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: #ffe8ee;
        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:#ffe8ee;
        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:.........完整代码请登录后点击上方下载按钮下载查看