css+gsap实现一个磁盘音乐播放机效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+gsap实现一个磁盘音乐播放机效果代码，可以点击机器的各个按钮

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        :root {
          --size: 90;
          --unit: calc((var(--size) / var(--img-height)) * 1vmin);
          --img-height: 577;
          --img-width: 721;
          --bg: hsl(193deg 60% 97%);
          --bd: .7vmin solid hsl(220deg 100% 19%);
          --p: hsl(42deg 100% 59%);
        }
        
        body {
          background: var(--bg);
          overflow: hidden;
        }
        
        .canvas {
          height: calc(var(--img-height) * var(--unit));
          width: calc(var(--img-width) * var(--unit));
          z-index: 2;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .canvas * {
          position: absolute;
        }
        .canvas .box {
          width: 49vmin;
          height: 22vmin;
          background: #1ebcc8;
          top: 55%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 0.4vmin;
          border: var(--bd);
        }
        .canvas .box .top {
          width: 100.5%;
          height: 30%;
          background: transparent;
          border-bottom: var(--bd);
        }
        .canvas .box .top .rotate-dial-one {
          width: 3vmin;
          height: 3vmin;
          border-radius: 50%;
          top: 30%;
          left: 12%;
          background-image: conic-gradient(transparent 90%, #1c305a 90%), radial-gradient(#f0a119 30%, #002061 30%);
        }
        .canvas .box .top .rotate-dial-two {
          width: 3vmin;
          height: 3vmin;
          border-radius: 50%;
          top: 30%;
          left: 82%;
          background-image: conic-gradient(transparent 90%, #1c305a 90%), radial-gradient(#09ce82 30%, #002061 30%);
        }
        .canvas .box .top .volume-slider {
          width: 20.5vmin;
          height: 3.5vmin;
          top: 1.5vmin;
          left: 14.5vmin;
        }
        .canvas .box .top .volume-slider #track {
          width: 100%;
          height: 20%;
          background: #0081c2;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 1vmin;
        }
        .canvas .box .top .volume-slider #thumb {
          height: 100%;
          width: 7%;
          left: 4vmin;
          border-radius: 20vmin;
          background: #002061;
        }
        .canvas .box .bottom {
          width: 100%;
          height: 70%;
          top: 30%;
        }
        .canvas .box .bottom .section-one {
          width: 30%;
          height: 100%;
          border-right: var(--bd);
        }
        .canvas .box .bottom .section-one .speaker {
          width: 9vmin;
          height: 9vmin;
          background: #fead16;
          border-radius: 50%;
          top: 52%;
          left: 50%;
          border: var(--bd);
          transform: translate(-50%, -50%);
        }
        .canvas .box .bottom .section-one .speaker .middle {
          width: 50%;
          height: 50%;
          top: 50%;
          left: 50%;
          background: #cccccc;
          border: var(--bd);
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
        .canvas .box .bottom .section-three {
          width: 30%;
          height: 100%;
          border-left: var(--bd);
          left: 70%;
        }
        .canvas .box .bottom .section-three .speaker {
          width: 9vmin;
          height: 9vmin;
          background: #fead16;
          border-radius: 50%;
          top: 52%;
          left: 50%;
          border: var(--bd);
          transform: translate(-50%, -50%);
        }
        .canvas .box .bottom .section-three .speaker .middle {
          width: 50%;
          height: 50%;
          top: 50%;
          left: 50%;
          background: #cccccc;
          border: var(--bd);
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
        .canvas .box .bottom .section-two {
          height: 100%;
          width: 40%;
          left: 30%;
        }
        .canvas .box .bottom .section-two .control-panel {
          width: 60%;
          height: 60%;
          background: var(--p);
          top: 19%;
          left: 19%;
          border-radius: 0.8vmin;
          border: var(--bd);
        }
        .canvas .box .bottom .section-two .control-panel .button-1 {
          background: #fead16;
          cursor: pointer;
          border-radius: 0 0 0 1vmin;
          width: 2vmin;
          height: 2vmin;
          top: 69%;
          left: -0.4vmin;
          border: var(--bd);
        }
        .canvas .box .bottom .section-two .control-panel .button-2 {
          background: #ff675c;
          cursor: pointer;
          border-radius: 0;
          width: 2vmin;
          height: 2vmin;
          top: 69%;
          left: 2.8vmin;
          border: var(--bd);
        }
        .canvas .box .bottom .section-two .control-panel .button-3 {
          background: #0081c2;
          cursor: pointer;
          border-radius: 0;
          width: 2vmin;
          height: 2vmin;
          top: 69%;
          left: 5.8vmin;
          border: var(--bd);
        }
        .canvas .box .bottom .section-two .control-panel .button-4 {
          background: #09ce82;
          cursor: pointer;
          border-radius: 0 0 1vmin 0;
          width: 2vmin;
          height: 2vmin;
          top: 69%;
          left: 8.9vmin;
          border: var(--bd);
        }
        .canvas .handle {
          width: 49vmin;
          height: 10vmin;
          border: var(--bd);
          border-radius: 1vmin;
          top: 43%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
        }
        .canvas .button-side {
          width: 3vmin;
          z-index: -1;
          height: 3vmin;
          background: #00b8c2;
          top: 43.5vmin;
          border: var(--bd);
          border-radius: 0.8vmin;
        }
        .canvas .button-side:nth-child(1n) {
          left: 29.5vmin;
        }
        .canvas .button-side:nth-child(2n) {
          left: 78.5vmin;
        }
        .canvas .activex1 {
          left: 30vmin !important;
        }
        .canvas .activex2 {
          left: 78vmin !important;
        }
        .canvas .button-top {
          width: 3vmin;
          z-index: -1;
          height: 3vmin;
          background: #00b8c2;
          top: 36vmin;
          border: var(--bd);
          border-radius: 0.8vmin;
        }
        .canvas .button-top-1 {
          width: 3vmin;
          z-index: -1;
          height: 3vmin;
          background: #00b8c2;
          top: 36vmin;
          border: var(--bd);
          border-radius: 0.8vmin;
          left: 49vmin;
          cursor: pointer;
        }
        .canvas .button-top-2 {
          width: 3vmin;
          z-index: -1;
        .........完整代码请登录后点击上方下载按钮下载查看