纯css布局实现90年代磁带机效果-html代码-BFW代码库

代码语言：html
代码描述：纯css布局实现90年代磁带机效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/***********************/
/***********************/
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
/***********************/
/***********************/
/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

/* Generic */
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(120deg, #f6afbf, #F498AD, #f07390);
  cursor: pointer;
}

.face {
  position: absolute;
}

.svgs {
  position: absolute;
  left: 50%;
  bottom: 50px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.svg-icon {
  width: 30px;
  height: 30px;
}
.svg-icon:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #f2f2f2;
}

.svg-icon circle {
  stroke: white;
  stroke-width: 1;
}

.s {
  display: none;
}

/***************/
.radio {
  position: relative;
  width: 28vw;
  height: 9vw;
  -webkit-transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
          transform: perspective(10000px) rotateX(55deg) rotateZ(33deg) scale(0.8) translateZ(-9vw);
}

.radio-a {
  -webkit-animation: radio-a infinite 1s alternate 1.5s;
          animation: radio-a infinite 1s alternate 1.5s;
}

/******************/
.m {
  margin-top: 1.5vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(10deg);
          transform: rotateX(10deg);
}

.line {
  width: 0.5vw;
  height: 1vw;
  position: absolute;
  top: 0;
  -webkit-transform: translateZ(8vw);
          transform: translateZ(8vw);
}
.line__front {
  width: 0.5vw;
  height: 9vw;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(-7vw);
          transform: rotateX(-90deg) translateZ(-7vw);
}
.line__back {
  width: 0.5vw;
  height: 9vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-9vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-9vw);
}
.line__right {
  width: 2vw;
  height: 9vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-2vw) translateY(-9vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-2vw) translateY(-9vw);
}
.line__left {
  width: 2vw;
  height: 9vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
}
.line__top {
  width: 0.5vw;
  height: 2vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ(9vw);
          transform: translateZ(9vw);
}
.line__bottom {
  width: 0.5vw;
  height: 2vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-0.5vw);
          transform: rotateY(180deg) translateX(-0.5vw);
}
.line:nth-of-type(1) {
  right: -.5vw;
}
.line:nth-of-type(2) {
  left: -.5vw;
}
.line__front {
  background-color: #5669d5;
}
.line__back {
  background-color: #3d52c3;
}
.line__right {
  background-color: #3d52c3;
}
.line__right::before {
  content: '';
  position: absolute;
  width: 1vw;
  height: 1vw;
  bottom: .75vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 50%;
  background-color: #f2f2f2;
}
.line__left {
  background-color: #3d52c3;
}
.line__top {
  background-color: #6e82ed;
}
.line__bottom {
  background-color: #3d52c3;
}

.bar {
  width: 29vw;
  height: 1vw;
  position: absolute;
  top: 0;
  left: -.5vw;
  -webkit-transform: translateZ(16.5vw);
          transform: translateZ(16.5vw);
}
.bar__front {
  width: 29vw;
  height: 0.5vw;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(1.5vw);
          transform: rotateX(-90deg) translateZ(1.5vw);
}
.bar__back {
  width: 29vw;
  height: 0.5vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-29vw) translateY(-0.5vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-29vw) translateY(-0.5vw);
}
.bar__right {
  width: 2vw;
  height: 0.5vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(29vw) translateX(-2vw) translateY(-0.5vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(29vw) translateX(-2vw) translateY(-0.5vw);
}
.bar__left {
  width: 2vw;
  height: 0.5vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bar__top {
  width: 29vw;
  height: 2vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ(0.5vw);
          transform: translateZ(0.5vw);
}
.bar__bottom {
  width: 29vw;
  height: 2vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-29vw);
          transform: rotateY(180deg) translateX(-29vw);
}
.bar__front {
  background-color: #5669d5;
}
.bar__back {
  background-color: #3d52c3;
}
.bar__right {
  background-color: #3d52c3;
}
.bar__left {
  background-color: #6e82ed;
}
.bar__top {
  background-color: #6e82ed;
}
.bar__bottom {
  background-color: #3d52c3;
}

/******************/
.base {
  width: 26vw;
  height: 4vw;
  position: absolute;
  top: .5vw;
  left: 1vw;
}
.base__front {
  width: 26vw;
  height: 0.75vw;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(7.25vw);
          transform: rotateX(-90deg) translateZ(7.25vw);
}
.base__back {
  width: 26vw;
  height: 0.75vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-0.75vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-0.75vw);
}
.base__right {
  width: 8vw;
  height: 0.75vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-8vw) translateY(-0.75vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-8vw) translateY(-0.75vw);
}
.base__left {
  width: 8vw;
  height: 0.75vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.base__top {
  width: 26vw;
  height: 8vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ(0.75vw);
          transform: translateZ(0.75vw);
}
.base__bottom {
  width: 26vw;
  height: 8vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-26vw);
          transform: rotateY(180deg) translateX(-26vw);
}
.base__front {
  background-image: -webkit-gradient(linear, left top, right top, from(#16d2c8), to(#11a097));
  background-image: linear-gradient(to right, #16d2c8, #11a097);
}
.base__back {
  background-color: #1fa595;
}
.base__right {
  background-color: #1fa595;
}
.base__left {
  background-color: #1fa595;
}
.base__top {
  background-color: #1fa595;
}
.base__bottom {
  background-color: #1fa595;
}

.bb {
  width: 28vw;
  height: 1vw;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateZ(1vw);
          transform: translateZ(1vw);
}
.bb__front {
  width: 28vw;
  height: 12vw;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(-10vw);
          transform: rotateX(-90deg) translateZ(-10vw);
}
.bb__back {
  width: 28vw;
  height: 12vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-28vw) translateY(-12vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-28vw) translateY(-12vw);
}
.bb__right {
  width: 2vw;
  height: 12vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(28vw) translateX(-2vw) translateY(-12vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(28vw) translateX(-2vw) translateY(-12vw);
}
.bb__left {
  width: 2vw;
  height: 12vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-12vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-12vw);
}
.bb__top {
  width: 28vw;
  height: 2vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ(12vw);
          transform: translateZ(12vw);
}
.bb__bottom {
  width: 28vw;
  height: 2vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-28vw);
          transform: rotateY(180deg) translateX(-28vw);
}
.bb__front {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2.8vw, #00DBCD), color-stop(3.4vw, #119b93));
  background-image: linear-gradient(to bottom, #00DBCD 2.8vw, #119b93 3.4vw);
}
.bb__back {
  background-color: #23BAA8;
}
.bb__right {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#23BAA8), to(#12a9a0));
  background-image: linear-gradient(to bottom, #23BAA8, #12a9a0);
}
.bb__left {
  background-color: #00FFF0;
}
.bb__top {
  background-image: -webkit-gradient(linear, left top, right top, from(#99fff9), to(#00FFF0));
  background-image: linear-gradient(to right, #99fff9, #00FFF0);
}
.bb__bottom {
  background-color: #23BAA8;
}

.bf {
  width: 27.5vw;
  height: 3.5vw;
  position: absolute;
  top: 2vw;
  left: .25vw;
  -webkit-transform: translateZ(1vw);
          transform: translateZ(1vw);
}
.bf__front {
  width: 27.5vw;
  height: 9vw;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(-2vw);
          transform: rotateX(-90deg) translateZ(-2vw);
}
.bf__back {
  width: 27.5vw;
  height: 9vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-27.5vw) translateY(-9vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-27.5vw) translateY(-9vw);
}
.bf__right {
  width: 7vw;
  height: 9vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(27.5vw) translateX(-7vw) translateY(-9vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(27.5vw) translateX(-7vw) translateY(-9vw);
}
.bf__left {
  width: 7vw;
  height: 9vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
}
.bf__top {
  width: 27.5vw;
  height: 7vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ(9vw);
          transform: translateZ(9vw);
}
.bf__bottom {
  width: 27.5vw;
  height: 7vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-27.5vw);
          transform: rotateY(180deg) translateX(-27.5vw);
}
.bf__front {
  background-color: #00DBCD;
}
.bf__back {
  background-color: #23BAA8;
}
.bf__right {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#23BAA8), to(#12a9a0));
  background-image: linear-gradient(to bottom, #23BAA8, #12a9a0);
}
.bf__left {
  background-color: #00FFF0;
}
.bf__top {
  background-image: -webkit-gradient(linear, left top, right top, from(#99fff9), to(#00FFF0));
  background-image: linear-gradient(to right, #99fff9, #00FFF0);
}
.bf__bottom {
  background-color: #23BAA8;
}

/****************/
/****************/
.screen {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  position: absolute;
  top: .5vw;
  left: .5vw;
  width: 27vw;
  height: 2vw;
  overflow: hidden;
  box-shadow: inset 0.15vw -0.25vw 0.1vw #00FFF0, inset -0.15vw 0.15vw 0.1vw #00c2b5;
  background-color: rgba(0, 219, 205, 0.5);
}
.screen::before {
  content: '';
  position: absolute;
  width: 90%;
  height: .2vw;
  background-color: #f2f2f2;
  box-shadow: 0.05vw 0.05vw 0.075vw #00a89d, -0.05vw -0.05vw 0.075vw #00a89d, -0.05vw 0.05vw 0.075vw #00a89d, 0.05vw -0.05vw 0.075vw #00a89d;
}
.screen::after {
  content: '';
  position: absolute;
  width: .2vw;
  height: 1vw;
  background-color: #5a6dd6;
  box-shadow: 0.05vw 0.05vw 0.075vw #00a89d, -0.05vw -0.05vw 0.075vw #00a89d, -0.05vw 0.05vw 0.075vw #00a89d, 0.05vw -0.05vw 0.075vw #00a89d;
  -webkit-animation: indicator 8s infinite alternate;
          animation: indicator 8s infinite alternate;
}

.shadow {
  position: absolute;
  width: 120%;
  height: 200%;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.shadow::before, .shadow::after {
  content: '';
  position: absolute;
  width: 28vw;
  height: 100%;
  bottom: 0;
  left: 0;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
  background-image: -webkit-gradient(linear, left top, right top, from(#be4e67), to(#b1415a));
  background-image: linear-gradient(to right, #be4e67, #b1415a);
}
.shadow::after {
  height: 100%;
  bottom: 0;
  left: 9%;
  -webkit-transform: skewX(-15deg) skewY(8deg);
          transform: skewX(-15deg) skewY(8deg);
}

.keys {
  display: -webkit-box;
  display: flex;
  position: absolute;
  height: 1.1vw;
  bottom: 1vw;
  background-color: #23BAA8;
}
.keys::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120%;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg);
  background-color: #23BAA8;
  -webkit-animation: key-shadow 3s infinite;
          animation: key-shadow 3s infinite;
}
.keys--1 {
  left: 50%;
  -webkit-transform: translateZ(10vw) translateX(-50%);
          transform: translateZ(10vw) translateX(-50%);
}
.keys--2 {
  left: 2vw;
  -webkit-transform: translateZ(10vw);
          transform: translateZ(10vw);
}
.keys--3 {
  right: 2vw;
  -webkit-transform: translateZ(10vw);
          transform: translateZ(10vw);
}

.key {
  width: 1.25vw;
  height: 0.5vw;
  margin: 0 .125vw;
}
.key__front {
  width: 1.25vw;
  height: 0.75vw;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(0.25vw);
          transform: rotateX(-90deg) translateZ(0.25vw);
}
.key__back {
  width: 1.25vw;
  height: 0.75vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
}
.key__right {
  width: 1vw;
  height: 0.75vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
}
.key__left {
  width: 1vw;
  height: 0.75vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}
.key__top {
  width: 1.25vw;
  height: 1vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ(0.75vw);
          transform: translateZ(0.75vw);
}
.key__bottom {
  width: 1.25vw;
  height: 1vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-1.25vw);
          transform: rotateY(180deg) translateX(-1.25vw);
}
.key__front {
  background-color: #dddddd;
}
.key__back {
  background-color: #b3b3b3;
}
.key__right {
  background-color: #b3b3b3;
}
.key__left {
  background-color: #f2f2f2;
}
.key__top {
  background-color: #f2f2f2;
}
.key__bottom {
  background-color: #b3b3b3;
}
.key:nth-of-type(2) .key__top {
  -webkit-animation: key 1s infinite;
          animation: key 1s infinite;
}
.key--cta .key__front {
  background-color: #d6c35a;
  -webkit-animation: grow-front-key 5s infinite ease;
          animation: grow-front-key 5s infinite ease;
}
@-webkit-keyframes grow-front-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 0.75vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(0.25vw);
            transform: rotateX(-90deg) translateZ(0.25vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 0.5vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(0.5vw);
            transform: rotateX(-90deg) translateZ(0.5vw);
  }
}
@keyframes grow-front-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 0.75vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(0.25vw);
            transform: rotateX(-90deg) translateZ(0.25vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 0.5vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(0.5vw);
            transform: rotateX(-90deg) translateZ(0.5vw);
  }
}
.key--cta .key__back {
  background-color: #bba83a;
  -webkit-animation: grow-back-key 5s infinite ease;
          animation: grow-back-key 5s infinite ease;
}
@-webkit-keyframes grow-back-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
  }
}
@keyframes grow-back-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
  }
}
.key--cta .key__right {
  background-color: #bba83a;
  -webkit-animation: grow-right-key 5s infinite ease;
          animation: grow-right-key 5s infinite ease;
}
@-webkit-keyframes grow-right-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
  }
}
@keyframes grow-right-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
  }
}
.key--cta .key__left {
  background-color: #EEDB73;
  -webkit-animation: grow-left-key 5s infinite ease;
          animation: grow-left-key 5s infinite ease;
}
@-webkit-keyframes grow-left-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
            transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
            transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
  }
}
@keyframes grow-left-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
            transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
            transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
  }
}
.key--cta .key__top {
  background-color: #EEDB73;
  -webkit-animation: grow-top-key 5s infinite ease;
          animation: grow-top-key 5s infinite ease;
}
@-webkit-keyframes grow-top-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translateZ(0.75vw);
            transform: translateZ(0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translateZ(0.5vw);
            transform: translateZ(0.5vw);
  }
}
@keyframes grow-top-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translateZ(0.75vw);
            transform: translateZ(0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translateZ(0.5vw);
            transform: translateZ(0.5vw);
  }
}
.key--cta .key__bottom {
  background-color: #bba83a;
}
.key--cta:nth-of-type(2) .key__front {
  -webkit-animation: grow-front-key 3s infinite ease;
          animation: grow-front-key 3s infinite ease;
}
@keyframes grow-front-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 0.75vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(0.25vw);
            transform: rotateX(-90deg) translateZ(0.25vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 0.5vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(0.5vw);
            transform: rotateX(-90deg) translateZ(0.5vw);
  }
}
.key--cta:nth-of-type(2) .key__back {
  -webkit-animation: grow-back-key 3s infinite ease;
          animation: grow-back-key 3s infinite ease;
}
@keyframes grow-back-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-1.25vw) translateY(-0.5vw);
  }
}
.key--cta:nth-of-type(2) .key__right {
  -webkit-animation: grow-right-key 3s infinite ease;
          animation: grow-right-key 3s infinite ease;
}
@keyframes grow-right-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.25vw) translateX(-1vw) translateY(-0.5vw);
  }
}
.key--cta:nth-of-type(2) .key__left {
  -webkit-animation: grow-left-key 3s infinite ease;
          animation: grow-left-key 3s infinite ease;
}
@keyframes grow-left-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1vw;
    height: 0.75vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
            transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1vw;
    height: 0.5vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
            transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
  }
}
.key--cta:nth-of-type(2) .key__top {
  -webkit-animation: grow-top-key 3s infinite ease;
          animation: grow-top-key 3s infinite ease;
}
@keyframes grow-top-key {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 1.25vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translateZ(0.75vw);
            transform: translateZ(0.75vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 1.25vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translateZ(0.5vw);
            transform: translateZ(0.5vw);
  }
}
.key--cta2 {
  -webkit-transform: scaleZ(0.5);
          transform: scaleZ(0.5);
}
.key--cta2 .key__front {
  background-color: #5a6dd6;
}
.key--cta2 .key__back {
  background-color: #4155c4;
}
.key--cta2 .key__right {
  background-color: #4155c4;
}
.key--cta2 .key__left {
  background-color: #7386ee;
}
.key--cta2 .key__top {
  background-color: #7386ee;
}
.key--cta2 .key__bottom {
  background-color: #4155c4;
}

.speakers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.speaker {
  position: absolute;
  top: 1.5vw;
}
.speaker__front {
  width: 6vw;
  height: 0.6vw;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(5.4vw);
          transform: rotateX(-90deg) translateZ(5.4vw);
}
.speaker__back {
  width: 6vw;
  height: 0.6vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
          transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
}
.speaker__right {
  width: 6vw;
  height: 0.6vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
          transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
}
.speaker__left {
  width: 6vw;
  height: 0.6vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
          transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
}
.speaker__top {
  width: 6vw;
  height: 6vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: translateZ(0.6vw);
          transform: translateZ(0.6vw);
}
.speaker__bottom {
  width: 6vw;
  height: 6vw;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-6vw);
          transform: rotateY(180deg) translateX(-6vw);
}
.speaker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6.35vw;
  height: 6.65vw;
  background-color: rgba(35, 186, 168, 0.5);
  -webkit-animation: speaker-shadow 1s infinite;
          animation: speaker-shadow 1s infinite;
}
.speaker--1 {
  left: calc(100% - 8vw);
}
.speaker--2 {
  right: calc(100% - 2vw);
}
.speaker__front {
  background-color: #b3b3b3;
}
.speaker__back {
  background-color: #f2f2f2;
}
.speaker__right {
  background-color: #b3b3b3;
}
.speaker__left {
  background-color: #f2f2f2;
}
.speaker__top {
  background-image: -webkit-gradient(linear, left top, right top, from(#eaeaea), to(#dddddd));
  background-image: linear-gradient(to right, #eaeaea, #dddddd);
}
.speaker__bottom {
  background-color: #b3b3b3;
}

.sfa {
  -webkit-animation: grow-front-speaker 1s infinite ease;
          animation: grow-front-speaker 1s infinite ease;
}
@-webkit-keyframes grow-front-speaker {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 6vw;
    height: 0.6vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(5.4vw);
            transform: rotateX(-90deg) translateZ(5.4vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 6vw;
    height: 1vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(5vw);
            transform: rotateX(-90deg) translateZ(5vw);
  }
}
@keyframes grow-front-speaker {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 6vw;
    height: 0.6vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(5.4vw);
            transform: rotateX(-90deg) translateZ(5.4vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 6vw;
    height: 1vw;
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotateX(-90deg) translateZ(5vw);
            transform: rotateX(-90deg) translateZ(5vw);
  }
}
.sba {
  -webkit-animation: grow-back-speaker 1s infinite ease;
          animation: grow-back-speaker 1s infinite ease;
}
@-webkit-keyframes grow-back-speaker {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 6vw;
    height: 0.6vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 6vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
  }
}
@keyframes grow-back-speaker {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 6vw;
    height: 0.6vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.6vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 6vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
            transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
  }
}
.sra {
  -webkit-animation: grow-right-speaker 1s infinite ease;
          animation: grow-right-speaker 1s infinite ease;
}
@-webkit-keyframes grow-right-speaker {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 6vw;
    height: 0.6vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 6vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
  }
}
@keyframes grow-right-speaker {
  0%, 15%, 45%, 60%, 62%, 68% {
    width: 6vw;
    height: 0.6vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.6vw);
  }
  20%, 40%, 58%, 64%, 70%, 100% {
    width: 6vw;
    height: 1vw;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
            transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-1vw);
  }
}.........完整代码请登录后点击上方下载按钮下载查看