xbox收音机播放音乐动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：xbox收音机播放音乐动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
* {
  box-sizing: border-box;
}
:root {
  --perspective: 1200;
  --rotate-x: -15;
  --rotate-y: -40;
  --xbox-scale: 4;
  --xbox-width: calc(5.9 * var(--xbox-scale));
  --xbox-height: calc(2.5 * var(--xbox-scale));
  --xbox-depth: calc(10.8 * var(--xbox-scale));
  --plane-width: var(--xbox-width);
  --plane-height: var(--xbox-depth);
  --transition: 0.1s;
  --power: 0;
}
body {
  min-height: 100vh;
  background: #3f9274;
}
.scene {
  -webkit-perspective: calc(var(--perspective, 800) * 1px);
          perspective: calc(var(--perspective, 800) * 1px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  height: 100vh;
  width: 100vw;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.plane {
  height: calc(var(--plane-height, 25) * 1vmin);
  width: calc(var(--plane-width, 25) * 1vmin);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translate3d(0, 0, calc((var(--xbox-height) * -0.5) * 1vmin));
          transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translate3d(0, 0, calc((var(--xbox-height) * -0.5) * 1vmin));
}
.cuboid {
  --width: var(--cuboid-width, 15);
  --height: var(--cuboid-height, 10);
  --depth: var(--cuboid-depth, 4);
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  position: absolute;
  -webkit-transform: translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
          transform: translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cuboid__side {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
          transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
          transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  -webkit-transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
          transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  -webkit-transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
          transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  -webkit-transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
          transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  -webkit-transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
          transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}
.xbox {
  --width: var(--xbox-width);
  --height: var(--xbox-height);
  --depth: var(--xbox-depth);
  --z: calc(var(--xbox-height) * 0.5);
}
.xbox.xbox--on .xbox__sleep {
  display: none;
}
.xbox.xbox--on .xbox__mouth {
  -webkit-animation: wake-up-mouth 5s;
          animation: wake-up-mouth 5s;
}
.xbox.xbox--on .xbox__eye {
  -webkit-animation: wake-up 5s, eye-blink 5s 5s infinite;
          animation: wake-up 5s, eye-blink 5s 5s infinite;
}
.xbox.xbox--on > div:nth-of-type(3) .xbox__logo {
  -webkit-animation-name: blink;
          animation-name: blink;
  -webkit-animation-iteration-count: 8;
          animation-iteration-count: 8;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: steps(2, start);
          animation-timing-function: steps(2, start);
}
@-webkit-keyframes blink {
  to {
    fill: #fff;
  }
}
@keyframes blink {
  to {
    fill: #fff;
  }
}
.xbox__face {
  height: 20%;
  width: 20%;
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 1px);
          transform: translate3d(-50%, -50%, 1px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.xbox__mouth {
  height: 2.5vmin;
  width: 2.5vmin;
  border-radius: 50%;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -1.25vmin;
  -webkit-clip-path: inset(50% 0 0 0);
  clip-path: inset(50% 0 0 0);
  overflow: hidden;
  -webkit-transform-origin: 50% 75%;
          transform-origin: 50% 75%;
  -webkit-transform: translate(0, 25%) scale(calc(0.1 + (var(--power) * 0.9)));
          transform: translate(0, 25%) scale(calc(0.1 + (var(--power) * 0.9)));
}
.xbox__mouth:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 50%;
  width: 50%;
  background: #f00;
  border-radius: 50%;
  -webkit-transform: translate(0, 50%);
          transform: translate(0, 50%);
}
.xbox__sleep {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 3rem;
  position: absolute;
  left: 100%;
  opacity: 0.75;
  bottom: 100%;
  color: #1f4738;
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-transform: scale(0) translate3d(0, 0, 0);
          transform: scale(0) translate3d(0, 0, 0);
  -webkit-animation: sleep calc(var(--s, 1) * 1s) calc(var(--d, 0) * 1s) infinite both;
          animation: sleep calc(var(--s, 1) * 1s) calc(var(--d, 0) * 1s) infinite both;
}
.xbox__sleep--one {
  --x: 200;
  --y: -300;
  --d: 0.2;
  --s: 1;
}
.xbox__sleep--two {
  --x: 150;
  --y: -200;
  --d: 0.4;
  --s: 2;
}
.xbox__sleep--three {
  --x: 250;
  --y: -150;
  --d: 0.6;
  --s: 1.8;
}
.xbox__eye {
  height: 1.75vmin;
  width: 1.75vmin;
  background: #000;
  position: absolute;
  top: 0;
  border-radius: 50%;
  -webkit-transform: scaleY(calc(0.1 + (var(--power) * 0.9)));
          transform: scaleY(calc(0.1 + (var(--power) * 0.9)));
}
.xbox__eye--left {
  left: 0;
}
.xbox__eye--right {
  right: 0;
}
.xbox__eye:after {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  height: 20%;
  width: 20%;
  background: #fff;
  border-radius: 50%;
}
@-webkit-keyframes eye-blink {
  0%, 49%, 51%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
  }
}
@keyframes eye-blink {
  0%, 49%, 51%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  50% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
  }
}
.xbox > div:nth-of-type(1),
.xbox > div:nth-of-type(2) {
  background: #ccc;
}
.xbox > div:nth-of-type(1):after,
.xbox > div:nth-of-type(2):after {
  content: "";
  position: absolute;
  background: repeating-radial-gradient(#999 0 50%, transparent 50% 100%) 0 0/6px 6px, #ccc;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
}
.xbox > div:nth-of-type(3) {
  background: #d9d9d9;
}
.xbox > div:nth-of-type(3):after {
  content: '';
  background: #1a1a1a;
  height: 10%;
  width: 5%;
  position: absolute;
  bottom: 15%;
  left: 4%;
}
.xbox > div:nth-of-type(3):before {
  content: '';
  background: #1a1a1a;
  height: 0.5vmin;
  width: 0.5vmin;
  border-radius: 50%;
  bottom: 15%;
  left: 11%;
  position: absolute;
}
.xbox > div:nth-of-type(4) {
  background: #f2f2f2;
}
.xbox > div:nth-of-type(4):after {
  content: '';
  height: 15%;
  bottom: 15%;
  right: 5%;
  position: absolute;
  background: repeating-linear-gradient(90deg, #808080 0 90%, transparent 90% 100%) 0 0/20% 100%, transparent;
  width: 55%;
}
.xbox > div:nth-of-type(4):before {
  content: '';
  height: 20%;
  bottom: 35%;
  right: 7%;
  position: absolute;
  width: 15%;
  background: repeating-radial-gradient(#808080 0 50%, transparent 50% 100%) 0 0/0.5vmin 0.5vmin, transparent;
}
.xbox > div:nth-of-type(5) {
  background: #e6e6e6;
}
.xbox > div:nth-of-type(5):after {
  content: '';
  background: repeating-radial-gradient(#000 0 50%, transparent 50% 100%) 0 0/0.75vmin 0.75vmin, #262626;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: calc(var(--xbox-width) * 0.1vmin);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: calc(var(--xbox-width) * 0.9vmin);
  height: calc(var(--xbox-width) * 0.9vmin);
}
.xbox > div:nth-of-type(6) {
  background: #bfbfbf;
}
.xbox > div:nth-of-type(6):after {
  content: "";
  position: absolute;
  background: repeating-radial-gradient(#595959 0 50%, transparent 50% 100%) 0 0/0.5vmin 0.5vmin, #bfbfbf;
  width: 90%;
  height: 15%;
  left: 5%;
  top: 5%;
}
.xbox > div:nth-of-type(5) .xbox__logo {
  position: absolute;
  bottom: 5%;
  left: 5%;
  height: 4%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  fill: #8c8c8c;
}
.xbox__label {
  font-family: sans-serif;
  bottom: 9%;
  left: 8.5%;
  font-size: 0.5rem;
  position: absolute;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  color: #8c8c8c;
}
.xbox > div:nth-of-type(3) .xbox__logo {
  height: 100%;
  position: absolute;
  right: 5%;
  top: 10%;
  height: 20%;
}
.xbox__shadow {
  height: 100%;
  width: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.5), transparent);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  position: absolute;
  -webkit-transition: background var(--transition), -webkit-transform var(--transition), -webkit-filter var(--transition);
  transition: background var(--transition), -webkit-transform var(--transition), -webkit-filter var(--transition);
  transition: transform var(--transition), background var(--transition), filter var(--transition);
  transition: transform var(--transition), background var(--transition), filter var(--transition), -webkit-transform var(--transition), -webkit-filter var(--transition);
}
.xbox__plane {
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: p.........完整代码请登录后点击上方下载按钮下载查看