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

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

代码语言：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-slid.........完整代码请登录后点击上方下载按钮下载查看