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: sans-serif;
  font-size: 1.35625vmin;
  color: rgba(17, 37, 57, 0.75);
  text-transform: uppercase;
}

/***********************/
/***********************/
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  font-weight: bolder;
  overflow: hidden;
  cursor: grab;
  background-color: #b7ecff;
}

.face {
  position: absolute;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/***********************/
/***********************/
.main {
  position: absolute;
  width: 42vmin;
  height: 12.25vmin;
  transform: perspective(700vmin) rotateX(66deg) rotateZ(40deg) translateZ(-28vmin);
}

.shadows {
  position: absolute;
  width: 102%;
  height: 102%;
  left: -1%;
  bottom: -1%;
  background-image: radial-gradient(#639cb5, #41748a);
  box-shadow: 0 0 0.875vmin 0.2625vmin rgba(65, 116, 138, 0.5);
}
.shadows::after {
  content: "";
  position: absolute;
  width: 102%;
  height: 102%;
  left: -1%;
  top: -1%;
  background-color: #396579;
  box-shadow: 0 0 0.875vmin 0.4375vmin rgba(65, 116, 138, 0.5);
  border-radius: 0.4375vmin;
  filter: blur(0.2625vmin);
}
.shadows::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46.375vmin;
  height: 43.75vmin;
  border-bottom-left-radius: 14.875vmin;
  transform-origin: bottom left;
  transform: skewX(-15deg);
  background-image: linear-gradient(to top, #396579, #41748a 30%, #4a829b 50%, #639cb5);
  box-shadow: 0 0 0.875vmin 0.4375vmin rgba(65, 116, 138, 0.5);
  filter: blur(0.2625vmin);
}

.waves {
  position: absolute;
  top: 100%;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}

.is-wave-playing {
  visibility: visible;
  opacity: 1;
}

.wave {
  height: 0vmin;
  width: 6vmin;
  background-color: #639cb5;
}
.wave:nth-of-type(3) {
  animation: wave 525ms ease-in alternate infinite 300ms;
}
.wave:nth-of-type(4) {
  animation: wave 525ms ease-in alternate infinite 400ms;
}
.wave:nth-of-type(5) {
  animation: wave 525ms ease-in alternate infinite 500ms;
}
.wave:nth-of-type(2), .wave:nth-of-type(6) {
  height: 0vmin;
  animation: wave-2 262.5ms ease-in alternate infinite 425ms;
}
.wave:nth-of-type(1), .wave:nth-of-type(7) {
  height: 0vmin;
  animation: wave-3 525ms ease-in alternate infinite 850ms;
}

@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% {
    height: 5.25vmin;
  }
  100% {
    height: 10.5vmin;
  }
}
@keyframes wave-3 {
  0%, 50% {
    height: 0vmin;
  }
  75%, 100% {
    height: 8.75vmin;
  }
}
/***********************/
/***********************/
.a {
  width: 31.5vmin;
  height: 8.75vmin;
  position: absolute;
  top: 0;
  left: 0;
}
.a__front {
  width: 31.5vmin;
  height: 47.25vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-38.5vmin);
}
.a__back {
  width: 31.5vmin;
  height: 47.25vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-31.5vmin) translateY(-47.25vmin);
}
.a__right {
  width: 8.75vmin;
  height: 47.25vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(31.5vmin) translateX(-8.75vmin) translateY(-47.25vmin);
}
.a__left {
  width: 8.75vmin;
  height: 47.25vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-47.25vmin);
}
.a__top {
  width: 31.5vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: translateZ(47.25vmin);
}
.a__bottom {
  width: 31.5vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-31.5vmin);
}
.a__front {
  background-color: #639bd1;
  padding: 3.5vmin;
}
.a__front::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #112539;
}
.a__back {
  background-color: #397fc3;
  background-image: linear-gradient(to bottom, transparent 70%, #17324d), linear-gradient(to right, transparent 70%, #73a5d6), linear-gradient(to left, transparent 70%, #73a5d6), linear-gradient(to top, transparent 70%, #73a5d6), linear-gradient(to top, #1c3f61, #285888, #2e659c 20%, #397fc3);
  background-size: 100% 1.75vmin, 1.75vmin 100%, 1.75vmin 100%, 100% 1.75vmin, 100% 7vmin;
  background-position: 0 100%, 100% 0, 0 0, 0 0, 0 100%;
  background-repeat: no-repeat;
}
.a__back::after {
  content: "stereo";
  position: absolute;
  top: 1.75vmin;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 5.25vmin;
  color: #397fc3;
  text-shadow: 0 0 0.175vmin #87b2dc;
}
.a__back::before {
  content: "";
  position: absolute;
  width: 26.25vmin;
  height: 17.5vmin;
  bottom: 0.175vmin;
  right: 0.175vmin;
  border-top-left-radius: 0.875vmin;
  background-image: linear-gradient(to bottom, rgba(51, 114, 176, 0.75), rgba(51, 114, 176, 0.1));
  border-top: 0.2625vmin solid #2e659c;
  border-left: 0.2625vmin solid #2e659c;
}
.a__left {
  background-color: #73a5d6;
  background-image: linear-gradient(to left, transparent 70%, #9ec1e3), linear-gradient(to top, #397fc3, #4c8cca 20%, #73a5d6), linear-gradient(to top, #73a5d6 70%, #93b9df);
  background-size: 1.75vmin 100%, 100% 7vmin, 100% 1.75vmin;
  background-position: 0% 100%, 0 100%, 0 0%;
  background-repeat: no-repeat;
}
.a__right {
  background-color: #4c8cca;
}
.a__top {
  background-color: #112539;
}
.a__bottom {
  background-color: #396579;
}

.b01__front,
.b02__front,
.b04__front,
.b03__front {
  background-color: #639bd1;
  background-image: linear-gradient(to top, transparent 70%, #aac9e6), linear-gradient(to top, #4f8ecc, #5b96cf 20%, #639bd1);
  background-size: 100% 1.75vmin, 100% 7vmin;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}
.b01__back,
.b02__back,
.b04__back,
.b03__back {
  background-color: #397fc3;
  background-image: linear-gradient(to top, transparent 70%, #7fadd9), linear-gradient(to top, #3372b0, #377abb 20%, #397fc3);
  background-size: 100% 1.75vmin, 100% 7vmin;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

.b01 {
  width: 9.275vmin;
  height: 12.25vmin;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(47.25vmin);
}
.b01__front {
  width: 9.275vmin;
  height: 8.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(3.5vmin);
}
.b01__back {
  width: 9.275vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.275vmin) translateY(-8.75vmin);
}
.b01__right {
  width: 12.25vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.275vmin) translateX(-12.25vmin) translateY(-8.75vmin);
}
.b01__left {
  width: 12.25vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8.75vmin);
}
.b01__top {
  width: 9.275vmin;
  height: 12.25vmin;
  transform-origin: top left;
  transform: translateZ(8.75vmin);
}
.b01__bottom {
  width: 9.275vmin;
  height: 12.25vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-9.275vmin);
}
.b01__front {
  background-color: #639bd1;
  background-image: linear-gradient(to left, transparent 70%, #9ec1e3), linear-gradient(to top, transparent 70%, #aac9e6), linear-gradient(to top, #4f8ecc, #5b96cf 20%, #639bd1);
  background-size: 1.75vmin 100%, 100% 1.75vmin, 100% 7vmin;
  background-position: 0 100%, 0 0, 0 100%;
  background-repeat: no-repeat;
}
.b01__back {
  background-color: #397fc3;
  background-image: linear-gradient(to right, transparent 70%, #73a5d6), linear-gradient(to top, transparent 70%, #7fadd9), linear-gradient(to top, #3372b0, #377abb 20%, #397fc3);
  background-size: 1.75vmin 100%, 100% 1.75vmin, 100% 7vmin;
  background-position: 100% 0%, 0 0, 0 100%;
  background-repeat: no-repeat;
}
.b01__left {
  background-color: #73a5d6;
  background-image: linear-gradient(to right, transparent 70%, #9ec1e3), linear-gradient(to left, transparent 70%, #9ec1e3), linear-gradient(to top, #639bd1, #6ba0d4 20%, #73a5d6), linear-gradient(to top, #73a5d6 70%, #9abee2);
  background-size: 1.75vmin 100%, 1.75vmin 100%, 100% 7vmin, 100% 1.75vmin, 100% 100%;
  background-position: 100% 0, 0 100%, 0 100%, 0 0%, 0 0;
  background-repeat: no-repeat;
}
.b01__right {
  background-image: linear-gradient(to right, #4c8cca 20%, #112539 20% 60%, #4c8cca 60%);
}
.b01__top {
  background-color: #73a5d6;
}
.b01__bottom {
  background-color: #397fc3;
}

.b02 {
  width: 15.4vmin;
  height: 12.25vmin;
  position: absolute;
  top: 0;
  left: 16.1vmin;
  transform: translateZ(47.25vmin);
}
.b02__front {
  width: 15.4vmin;
  height: 8.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(3.5vmin);
}
.b02__back {
  width: 15.4vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-15.4vmin) translateY(-8.75vmin);
}
.b02__right {
  width: 12.25vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(15.4vmin) translateX(-12.25vmin) translateY(-8.75vmin);
}
.b02__left {
  width: 12.25vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8.75vmin);
}
.b02__top {
  width: 15.4vmin;
  height: 12.25vmin;
  transform-origin: top left;
  transform: translateZ(8.75vmin);
}
.b02__bottom {
  width: 15.4vmin;
  height: 12.25vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-15.4vmin);
}
.b02__front {
  background-color: #639bd1;
  background-image: linear-gradient(to right, transparent 70%, #9ec1e3), linear-gradient(to top, transparent 70%, #aac9e6), linear-gradient(to top, #4f8ecc, #5b96cf 20%, #639bd1);
  background-size: 1.75vmin 100%, 100% 1.75vmin, 100% 7vmin;
  background-position: 100% 0%, 0 0, 0 100%;
  background-repeat: no-repeat;
}
.b02__back {
  background-color: #397fc3;
  background-image: linear-gradient(to left, transparent 70%, #73a5d6), linear-gradient(to top, transparent 70%, #7fadd9), linear-gradient(to top, #3372b0, #377abb 20%, #397fc3);
  background-size: 1.75vmin 100%, 100% 1.75vmin, 100% 7vmin;
  background-position: 0 100%, 0 0, 0 100%;
  background-repeat: no-repeat;
}
.b02__left {
  background-image: linear-gradient(to right, #4c8cca 30%, #112539 30% 80%, #4c8cca 80%);
}
.b02__right {
  background-color: #4c8cca;
}
.b02__top {
  background-color: #73a5d6;
  display: inline-flex;
  justify-content: center;
  gap: 1.3125vmin;
}
.b02__top::before, .b02__top::after {
  content: "";
  margin-top: 5.25vmin;
  width: 3.0625vmin;
  height: 3.0625vmin;
  border: 0.39375vmin solid #ffffff;
  outline: 0.35vmin solid #498d8b;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 50%, #112539 50%, #94b8c1 50%);
}
.b02__bottom {
  background-color: #397fc3;
}

.b03 {
  width: 7.35vmin;
  height: 4.9vmin;
  position: absolute;
  top: 0;
  left: 9.1vmin;
  transform: translateZ(47.25vmin);
}
.b03__front {
  width: 7.35vmin;
  height: 8.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-3.85vmin);
}
.b03__back {
  width: 7.35vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-7.35vmin) translateY(-8.75vmin);
}
.b03__right {
  width: 4.9vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(7.35vmin) translateX(-4.9vmin) translateY(-8.75vmin);
}
.b03__left {
  width: 4.9vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8.75vmin);
}
.b03__top {
  width: 7.35vmin;
  height: 4.9vmin;
  transform-origin: top left;
  transform: translateZ(8.75vmin);
}
.b03__bottom {
  width: 7.35vmin;
  height: 4.9vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-7.35vmin);
}
.b03__front {
  background: #112539;
}
.b03__left {
  background-color: #73a5d6;
  display: none;
}
.b03__right {
  background-color: #4c8cca;
  display: none;
}
.b03__top {
  background-color: #73a5d6;
}
.b03__top::before {
  content: "hot line";
  display: inline-block;
  margin-top: 1.75vmin;
  padding: 0.4375vmin;
  color: #73a5d6;
  background-color: white;
  border-radius: 0.4375vmin;
}
.b03__bottom {
  background-color: #397fc3;
}

.b04 {
  width: 7.35vmin;
  height: 2.975vmin;
  position: absolute;
  bottom: 0;
  left: 9.1vmin;
  transform: translateZ(47.25vmin);
}
.b04__front {
  width: 7.35vmin;
  height: 8.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-5.775vmin);
}
.b04__back {
  width: 7.35vmin;
  height: 8.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg).........完整代码请登录后点击上方下载按钮下载查看