jquery实现传统唱碟旋转带进度音乐播放器效果代码-html代码-BFW代码库

jquery实现传统唱碟旋转带进度音乐播放器效果代码

代码语言：html

所属分类：多媒体

代码描述：jquery实现传统唱碟旋转带进度音乐播放器效果代码

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

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

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    
 
    html,
    body {
        font: 12px "微软雅黑";
        font-family: 'GothamRnd-Light';
        color: #666;
        background-color: #272727;
        width: 100%;
        height: 100%;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    .container {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      padding-top: 200px;
      z-index: 300;
    }
    
    .music-box {
      width: 500px;
      height: 500px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      display: block;
      margin: 0px auto 0;
    }
    
    .music-box img {
      width: 100%;
      border-radius: 50%;
      transition: all 0.36s ease;
      display: inline;
      animation: spin 46s infinite linear;
      animation-play-state: paused;
    }
    
    .music-box .mask {
      width: 316px;
      height: 316px;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      position: absolute;
      background-color: rgba(0, 0, 0, 0.3);
    }
    
    .mplayer {
      position: absolute;
      width: 60px;
      height: 60px;
      background-color: #ad986d;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      transform: translate3d(-50%, -50%, 0);
      z-index: 2;
      cursor: pointer;
    }
    
    .mplayer i {
      background-color: #000000;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 2px;
      height: 10px;
      margin-left: -2px;
      transition: 0.36s ease;
    }
    
    .fa {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transform: translate(0, 0);
      line-height: 10px;
    }
    
    .mplayer i .before {
      width: 0;
      height: 0;
      border-color: transparent transparent transparent #ad986d;
      display: inline-block;
      border-width: 4px 6px 4px 6px;
      border-style: solid;
      color: #ad986d;
      margin-left: 2px;
      border-width: 5px 8px;
      margin-top: 0px;
      transition: 0.36s ease;
    }
    
    .mplayer i .before {
      border-left-color: #000;
    }
    
    .mplayer i .after {
      display: inline-block;
      width: 4px;
      height: 10px;
      opacity: 0;
      transition: 0.36s ease;
      border-left: 2px solid black;
      border-right: 2px solid black;
    }
    
    .loadingSvg circle {
      r: 14;
      stroke: rgba(0, 0, 0, 0.7);
      stroke-dasharray: 87;
      stroke-dashoffset: 87;
      cx: 25;
      cy: 25;
      stroke-width: 2;
      fill: none;
    }
    
    .m-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 326px;
      height: 326px;
    }
    
    .m_time span {
      display: block;
      text-align: center;
    }
    
    .m_time .mplayer_curtime {
      padding-top: 42px;
      font-size: 34px;
      color: #e1be78;
    }
    
    .m_time .m-join {
      display: none;
    }
    
    .m_time .mplayer_durtime {
      color: #ad986d;
    }
    
    .mplaying img {
      animation-play-state: running;
      -webkit-animation-play-state: running;
    }
    
    img {
      animation: spin 46s infinite linear;
      -webkit-animation: spin 46s infinite linear;
      animation-play-state: paused;
      -webkit-animation-play-state: paused;
    }
    
    .mplaying .mplayer i {
      margin-top: -9px;
      background-color: transparent;
    }
    
    .mplaying .mplayer i .before {
      opacity: 0;
    }
    
    .mplaying .mplayer i .after {
      opacity: 1;
    }
    
    .mplaying .loadingSvg circle {
      transition: 2s;
      stroke-dasharray: 87;
      stroke-dashoffset: 87;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
    
      100% {
        transform: rotate(360deg);
      }
    }
    
    @keyframes svgLoading {
      0% {
        stroke-dashoffset: 2;
      }
    
      100% {
        stroke-dashoffset: -39;
     .........完整代码请登录后点击上方下载按钮下载查看