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