div+css+js实现老式三维磁带声音机录音机按下播放音乐效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css+js实现老式三维磁带声音机录音机按下播放音乐效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        /***********************/
        /***********************/
        /***********************/
        *,
        *::after,
        *::before {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          transform-style: preserve-3d;
          user-select: none;
          -webkit-tap-highlight-color: transparent;
          appearance: none;
          font-family: cursive;
        }
        
        /***********************/
        /***********************/
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          width: 100%;
          overflow: hidden;
          cursor: grab;
          background-color: #fffff9;
        }
        
        .face {
          position: absolute;
        }
        
        .flex {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        /***********************/
        /***********************/
        .main {
          position: absolute;
          width: 70vmin;
          height: 49vmin;
          transform: perspective(700vmin) rotateX(60deg) rotateZ(40deg) translateZ(-10.5vmin);
          transition: transform 350ms ease-out;
        }
        
        .shadows {
          position: absolute;
          top: 0;
          left: -2%;
          width: 102%;
          height: 100%;
          transform: translateZ(-0.175vmin);
          background-color: #a67e6e;
        }
        
        .shadow {
          position: absolute;
        }
        .shadow-1 {
          top: 100%;
          width: 100%;
          height: 7vmin;
          transform-origin: top left;
          transform: skewX(-5deg);
          background-image: linear-gradient(to bottom, #a67e6e, #b39284, #bda094 40%);
        }
        .shadow-2 {
          left: 100%;
          width: 1.75vmin;
          height: 100%;
          transform-origin: top left;
          transform: skewY(40deg);
          background-image: linear-gradient(to right, #a67e6e, #bda094);
        }
        
        .waves {
          position: absolute;
          top: 112%;
          left: 0;
          display: grid;
          grid-auto-flow: column;
          width: 100%;
          height: 100%;
        }
        
        .is-wave-playing {
          display: none;
        }
        
        .wave {
          height: 0vmin;
          width: 7vmin;
          background-color: #bda094;
        }
        .wave:nth-of-type(2) {
          animation: wave 500ms ease-in alternate infinite 200ms;
        }
        .wave:nth-of-type(3) {
          animation: wave 500ms ease-in alternate infinite 300ms;
        }
        .wave:nth-of-type(4) {
          animation: wave 500ms ease-in alternate infinite 400ms;
        }
        .wave:nth-of-type(5) {
          animation: wave 500ms ease-in alternate infinite 500ms;
        }
        .wave:nth-of-type(6) {
          animation: wave 500ms ease-in alternate infinite 600ms;
        }
        .wave:nth-of-type(1), .wave:nth-of-type(7) {
          height: 0vmin;
          animation: wave-2 600ms ease-in alternate infinite 4250ms;
        }
        
        @keyframes wave {
          0%, 100% {
            height: 7vmin;
          }
          24% {
            height: 10.5vmin;
          }
          25%, 30% {
            height: 11.375vmin;
          }
          55%, 60% {
            height: 7.875vmin;
          }
          61%, 65% {
            height: 11.55vmin;
          }
          80%, 82% {
            height: 6.125vmin;
          }
          83%, 90% {
            height: 5.25vmin;
          }
          95% {
            height: 5.6875vmin;
          }
        }
        @keyframes wave-2 {
          0%, 50% {
            height: 0vmin;
          }
          75%, 100% {
            height: 8.75vmin;
          }
        }
        .a {
          width: 66.5vmin;
          height: 47.25vmin;
          position: absolute;
          top: 0.875vmin;
          left: 0;
        }
        .a__front {
          width: 66.5vmin;
          height: 1.75vmin;
          transform-origin: bottom left;
          transform: rotateX(-90deg) translateZ(45.5vmin);
        }
        .a__back {
          width: 66.5vmin;
          height: 1.75vmin;
          transform-origin: top left;
          transform: rotateX(-90deg) rotateY(180deg) translateX(-66.5vmin) translateY(-1.75vmin);
        }
        .a__right {
          width: 47.25vmin;
          height: 1.75vmin;
          transform-origin: top left;
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(66.5vmin) translateX(-47.25vmin) translateY(-1.75vmin);
        }
        .a__left {
          width: 47.25vmin;
          height: 1.75vmin;
          transform-origin: top left;
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
        }
        .a__top {
          width: 66.5vmin;
          height: 47.25vmin;
          transform-origin: top left;
          transform: translateZ(1.75vmin);
        }
        .a__bottom {
          width: 66.5vmin;
          height: 47.25vmin;
          transform-origin: top left;
          transform: rotateY(180deg) translateX(-66.5vmin);
        }
        .a__front {
          background-image: linear-gradient(to bottom, #988193, #bfb1bc);
        }
        .a__back {
          background-image: linear-gradient(to bottom, #be9eb9, #d7c3d3);
        }
        .a__left {
          background-image: linear-gradient(to bottom, #988193, #bfb1bc);
        }
        .a__right {
          background-image: linear-gradient(to bottom, #aa97a6, #c1b3be);
        }
        .a__top {
          background-color: #e7dbe5;
        }
        .a__bottom {
          background-color: #aa97a6;
          box-shadow: 0 0 1.3125vmin 0.875vmin #62473c;
        }
        
        .b {
          width: 70vmin;
          height: 49vmin;
          position: absolute;
          top: 0;
          left: 0;
          transform: translateZ(1.75vmin);
        }
        .b__front {
          width: 70vmin;
          height: 5.25vmin;
          transform-origin: bottom left;
          transform: rotateX(-90deg) translateZ(43.75vmin);
        }
        .b__back {
          width: 70vmin;
          height: 5.25vmin;
          transform-origin: top left;
          transform: rotateX(-90deg) rotateY(180deg) translateX(-70vmin) translateY(-5.25vmin);
        }
        .b__right {
          width: 49vmin;
          height: 5.25vmin;
          transform-origin: top left;
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(70vmin) translateX(-49vmin) translateY(-5.25vmin);
        }
        .b__left {
          width: 49vmin;
          height: 5.25vmin;
          transform-origin: top left;
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.25vmin);
        }
        .b__top {
          width: 70vmin;
          height: 49vmin;
          transform-origin: top left;
          transform: translateZ(5.25vmin);
        }
        .b__bottom {
          width: 70vmin;
          height: 49vmin;
          transform-origin: top left;
          transform: rotateY(180deg) translateX(-70vmin);
        }
        .b__front {
          background-image: linear-gradient(to top, #2c2514, #3d341c);
          border-top: 0.35vmin solid #62532c;
          border-bottom: 0.35vmin solid #2b2513;
        }
        .b__front::after {
          content: "";
          position: absolute;
          top: 55%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          width: 7.875vmin;
          height: 2.1875vmin;
          background-image: linear-gradient(to right, #0c0a05, black, #0c0a05);
        }
        .b__back {
          background-image: linear-gradient(to bottom, #2c2514, #3d341c);
          border-top: 0.35vmin solid #62532c;
          border-bottom: 0.35vmin solid #3a311a;
        }
        .b__left {
          background-image: linear-gradient(to top, #2c2514, #3d341c);
          border-top: 0.35vmin solid #62532c;
          border-bottom: 0.35vmin solid #2c2514;
        }
        .b__right {
          background-image: linear-gradient(to top, #1d190d, #2f2815);
          border-top: 0.35vmin solid #4e4324;
          border-bottom: 0.35vmin solid #0c0a05;
        }
        .b__top {
          background-color: #211c0f;
        }
        .b__bottom {
          background-color: #0c0a05;
        }
        
        .c {
          width: 38.325vmin;
          height: 48.3vmin;
          position: absolute;
          top: 0.175vmin;
          left: 0.175vmin;
          transform: translateZ(7.175vmin);
        }
        .c__front {
          width: 38.325vmin;
          height: 1.75vmin;
          transform-origin: bottom left;
          transform: rotateX(-90deg) translateZ(46.55vmin);
        }
        .c__back {
          width: 38.325vmin;
          height: 1.75vmin;
          transform-origin: top left;
          transform: rotateX(-90deg) rotateY(180deg) translateX(-38.325vmin) translateY(-1.75vmin);
        }
        .c__right {
          width: 48.3vmin;
          height: 1.75vmin;
          transform-origin: top left;
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(38.325vmin) translateX(-48.3vmin) translateY(-1.75vmin);
        }
        .c__left {
          width: 48.3vmin;
          height: 1.75vmin;
          transform-origin: top left;
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
        }
        .c__top {
          width: 38.325vmin;
          height: 48.3vmin;
          transform-origin: top left;
          transform: translateZ(1.75vmin);
        }
        .c__bottom {
          width: 38.325vmin;
          height: 48.3vmin;
          transform-origin: top left;
          transform: rotateY(180deg) translateX(-38.325vmin);
        }
        .c__front {
          background-image: linear-gradient(to top, #674e40, #96725d);
          border-top: 0.2625vmin solid #b99681;
          border-bottom: 0.2625vmin solid #785846;
        }
    .........完整代码请登录后点击上方下载按钮下载查看