.zongbox {
      position: absolute;
      width: 520PX;
      height: 520px;
      left: 0px;      /* 左外边距 */
      top: 0px;      /* 上外边距 */
      border-radius: 50%;   /* 设置圆角边框 */
      animation: rotate 5s linear infinite;
      /* 设置动画效果为rotate，持续时间4秒，循环播放无限次 */
      transform: scale(0.1);
      z-index: 9999;
    }

    .zongbox:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      /* 外阴影 右 下 半径 颜色 */
      animation: none;
      /* 设置动画效果为rotate，持续时间4秒，循环播放无限次 */
      transform: scale(0.8);
    }

    @keyframes rotate {
      from {
        transform: scale(0.1) rotate(0deg);
        /* 从初始状态开始旋转0度 */
      }

      to {
        transform: scale(0.1) rotate(360deg);
        /* 旋转到最终状态，360度 */
      }
    }

    .jdtbox {
      width: 520px;
      height: 520px;
      margin-left: 0px;
      /* 左外边距 */
      margin-top: 0px;
      /* 上外边距 */
      border-radius: 50%;
      /* 设置圆角边框 */
      animation: jdtrotate 5s linear infinite;
      /* 设置动画效果为rotate，持续时间4秒，循环播放无限次 */
      background: linear-gradient(#0331fce7, #2ad62a9c, #a031afc4, #e60b0b);
      /* 背景渐变 */
    }

    @keyframes jdtrotate {
      from {
        transform: rotate(175deg);
        /* 从初始状态开始旋转0度 */
      }

      to {
        transform: rotate(-185deg);
        /* 旋转到最终状态，360度 */
      }
    }


    /* 进度条 */
    .progress {
      cx: 260px;
      cy: 260px;
      r: 200px;
      fill: transparent;
      stroke: url(#grad1);
      stroke-width: 30px;
      stroke-dasharray: 1256;
      stroke-dashoffset: 1256;
      transition: stroke-dashoffset 0.1s linear;

    }


    .text {
      font-size: 0px;
      text-anchor: middle;
      alignment-baseline: middle;
      fill: #f50c33;

    }

    /*音乐容器*/
    .musiccontainer {
      width: 380px;
      height: 380px;
      background-color: #fff;
      position: relative;
      overflow: hidden;
      top: -450px;
      /* 上外边距 */
      left: 70px;
      /* 左外边距 */
      border-radius: 50%;
      /* 设置圆角边框 */



    }



    .square {
      width: 400px;
      height: 400px;
      position: absolute;
      outline: none;
      cursor: pointer;
      color: #f7f1f1;
      /* 颜色 */
      font-size: 20px;
      /* 字体大小 */
      font-weight: 600;
      /* 字体粗细 */
      letter-spacing: 3px;
      /* 字间距 */
      z-index: 999;
    }

    .square:hover {
      box-shadow: 0 0 50px rgba(0, 0, 0, 5);
      /* 外阴影 右 下 半径 颜色 */
    }

    .square:active {
      box-shadow: inset 0 0 50px rgba(0, 0, 0, 5);
      /* 内阴影 右 下 半径 颜色 */
    }

    /*右面  下一首 */
    .square:nth-child(1) {
      background-color: #e6e34f;
      width: 400px;
      height: 400px;
      margin-left: 77%;
      /* 左外边距 */
      transform: rotate(45deg);

    }

    /*左面   上一首 */
    .square:nth-child(2) {
      background-color: #d5d815;
      width: 400px;
      height: 400px;
      margin-left: -77%;
      /* 左外边距 */
      transform: rotate(45deg);
    }


    /*上面  音量+*/
    .square:nth-child(3) {
      background-color: #87c416;
      width: 400px;
      height: 400px;
      margin-top: -77%;
      /* 左外边距 */
      transform: rotate(45deg);
    }

    /*下面  音量- */
    .square:nth-child(4) {
      background-color: #95d173;
      width: 400px;
      height: 400px;
      margin-top: 77%;
      /* 左外边距 */
      margin-left: 0PX;
      /* 左外边距 */
      transform: rotate(45deg);
    }


    /*中间  播放暂停 */
    .square:nth-child(5) {
      background-color: #f0a57a;
      width: 200px;
      height: 200px;
      margin-top: 95px;
      /* 左外边距 */
      margin-left: 95px;
      /* 左外边距 */
      border-radius: 50%;
      /* 设置圆角边框 */



    }

    /* 按钮位置 */

    /*右面  下一首 */
    .button1 {
      position: absolute;
      top: 80px;
      left: 40px;
      background-color: transparent;
      border: none;
      outline: none;
      color: #383535;
      /* 颜色 */
      font-size: 24px;
      /* 字体大小 */
      font-weight: 600;
      /* 字体粗细 */
      letter-spacing: 3px;
      /* 字间距 */
      margin-left: 30px;
      /* 左外边距 */
      margin-top: 190px;
      /* 上外边距 */
      user-select: none;
      transform: rotate(-45deg);
    }

    /*右面  上一首 */
    .button2 {
      position: absolute;
      background-color: transparent;
      border: none;
      outline: none;
      color: #383535;
      /* 颜色 */
      font-size: 24px;
      /* 字体大小 */
      font-weight: 600;
      /* 字体粗细 */
      letter-spacing: 3px;
      /* 字间距 */
      margin-left: 290px;
      /* 左外边距 */
      margin-top: 45px;
      /* 上外边距 */
      user-select: none;
      transform: rotate(-45deg);
    }

    /*下面  音量+ */
    .button3 {
      position: absolute;
      background-color: transparent;
      border: none;
      outline: none;
      color: #383535;
      /* 颜色 */
      font-size: 28px;
      /* 字体大小 */
      font-weight: 600;
      /* 字体粗细 */
      letter-spacing: 6px;
      /* 字间距 */
      margin-left: 255px;
      /* 左外边距 */
      margin-top: 290px;
      /* 上外边距 */
      user-select: none;
      transform: rotate(-45deg);
    }

    /*下面  音量- */
    .button4 {
      position: absolute;
      top: 55px;
      left: 35px;
      background-color: transparent;
      border: none;
      outline: none;
      color: #383535;
      /* 颜色 */
      font-size: 28px;
      /* 字体大小 */
      font-weight: 600;
      /* 字体粗细 */
      letter-spacing: 6px;
      /* 字间距 */
      margin-right: 0px;
      /* 左外边距 */
      margin-top: 0px;
      /* 上外边距 */
      user-select: none;
      transform: rotate(-45deg);
    }

    /* 按钮位置 */
    .button5 {
      position: absolute;
      top: 80px;
      left: 40px;
      background-color: transparent;
      border: none;
      outline: none;
      color: #383535;
      /* 颜色 */
      font-size: 24px;
      /* 字体大小 */
      font-weight: 600;
      /* 字体粗细 */
      letter-spacing: 3px;
      /* 字间距 */
      margin-left: -1px;
      /* 左外边距 */
      margin-right: -200px;
      /* 右外边距 */
      user-select: none;

    }