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