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