纯css实现3d汽车360度旋转动画效果

代码语言:html

所属分类:三维

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

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

<title>CSSYBERTRUCK</title>

<style>
  *, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  -webkit-animation-play-state: var(--play-state, paused) !important;
          animation-play-state: var(--play-state, paused) !important;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

:root {
  --color-top: #E7EEF6;
  --color-glass: rgba(0, 0, 0, 0.6);
  --c-top: #DAE0E4;
  --c-side: #778189;
  --c-bottom: #444246;
  --c-bumper: #111;
  --speed: 2s;
  --duration: 30s;
}

label[for="animation"] {
  position: absolute;
  height: 2rem;
  color: white;
  top: 0;
  left: calc(1.5rem + 20px);
  line-height: 2rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

#animation {
  position: absolute;
  width: 20px;
  height: 2rem;
  top: 0;
  left: 1rem;
}

label[for="animation"], #animation {
  opacity: 0.3;
  transition: opacity .3s;
  cursor: pointer;
}
label[for="animation"]:hover, #animation:hover {
  opacity: 0.9;
}

#animation:checked ~ * {
  --play-state: 'running';
}

#cybertruck {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  --ry: 0deg;
  width: 340px;
  height: 930px;
  -webkit-transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn));
          transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn));
  -webkit-animation: cybertruck var(--duration) linear infinite;
          animation: cybertruck var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
@-webkit-keyframes cybertruck {
  from {
    -webkit-transform: rotateX(80deg) rotateZ(0turn);
            transform: rotateX(80deg) rotateZ(0turn);
  }
  to {
    -webkit-transform: rotateX(80deg) rotateZ(1turn);
            transform: rotateX(80deg) rotateZ(1turn);
  }
}
@keyframes cybertruck {
  from {
    -webkit-transform: rotateX(80deg) rotateZ(0turn);
            transform: rotateX(80deg) rotateZ(0turn);
  }
  to {
    -webkit-transform: rotateX(80deg) rotateZ(1turn);
            transform: rotateX(80deg) rotateZ(1turn);
  }
}
#cybertruck .highlight {
  border-left: 5px solid green;
  border-top: 5px solid red;
}
#cybertruck:before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 0;
  height: 100%;
  -webkit-transform: translateZ(-195px) scale(3, 1.2);
          transform: translateZ(-195px) scale(3, 1.2);
  box-shadow: 0 0 150px 50px rgba(0, 0, 0, 0.5);
}

.side {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  top: 0;
  width: 140px;
  height: 930px;
  left: 0;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg);
          transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg);
}
.side.-left {
  --ry: -90deg;
}
.side.-left:before {
  -webkit-animation: side-left var(--duration) linear infinite;
          animation: side-left var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-left {
  from, to {
    background: #8B898D;
    border-color: #4D5055;
  }
  50% {
    background: #A0A5A9;
    border-color: #5D6369;
  }
  75% {
    background: #676E76;
    border-color: #454244;
  }
}
@keyframes side-left {
  from, to {
    background: #8B898D;
    border-color: #4D5055;
  }
  50% {
    background: #A0A5A9;
    border-color: #5D6369;
  }
  75% {
    background: #676E76;
    border-color: #454244;
  }
}
.side.-right {
  --ry: -90deg;
}
.side.-right:before {
  -webkit-animation: side-right var(--duration) linear infinite;
          animation: side-right var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-right {
  from, to {
    background: #7C726F;
    border-color: #73645B;
  }
  25% {
    background: #4B5665;
    border-color: #34373E;
  }
  50%, 75% {
    background: #545A61;
    border-color: #454952;
  }
}
@keyframes side-right {
  from, to {
    background: #7C726F;
    border-color: #73645B;
  }
  25% {
    background: #4B5665;
    border-color: #34373E;
  }
  50%, 75% {
    background: #545A61;
    border-color: #454952;
  }
}
.side:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c-side);
  border-left: 50px solid;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%);
}
.side.-right {
  left: 100%;
}
.side.-right > .bumper {
  -webkit-transform: translateZ(-5px);
          transform: translateZ(-5px);
}
.side > .bumper {
  position: absolute;
  left: 0;
  bottom: 280px;
  height: 450px;
  width: 25px;
  background-color: var(--c-bumper);
  -webkit-transform: translateZ(5px);
          transform: translateZ(5px);
  -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
          clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
}

.side.-left .bumper {
  -webkit-animation: side-left-bumper var(--duration) linear infinite;
          animation: side-left-bumper var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-left-bumper {
  from, to, 50% {
    background: #3F4245;
  }
  75%, 80% {
    background: #000;
  }
  90% {
    background: #2C2C2D;
  }
}
@keyframes side-left-bumper {
  from, to, 50% {
    background: #3F4245;
  }
  75%, 80% {
    background: #000;
  }
  90% {
    background: #2C2C2D;
  }
}
.side.-right .bumper {
  -webkit-animation: side-right-bumper var(--duration) linear infinite;
          animation: side-right-bumper var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-right-bumper {
  from, to {
    background: #3F3129;
  }
  25% {
    background: #000;
  }
  50% {
    background: #34343C;
  }
}
@keyframes side-right-bumper {
  from, to {
    background: #3F3129;
  }
  25% {
    background: #000;
  }
  50% {
    background: #34343C;
  }
}
.well {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  height: 100px;
  position: absolute;
  width: 20px;
  --ry: 30deg;
}
.well.-front {
  left: 105px;
  top: 50px;
}
.well.-back {
  left: 80px;
  top: 685px;
}
.well:before, .well:after, .well .well-plate {
  background-color: var(--c-bumper);
}
.well:before, .well:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.well:before {
  bottom: 100%;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%);
          clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%);
}
.well:after {
  top: 100%;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
}
.well > .well-plate {
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: rotateY(var(--ry));
          transform: rotateY(var(--ry));
  -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
          clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
}
.well.-front:before {
  -webkit-transform: rotateZ(-60deg) rotateY(var(--ry));
          transform: rotateZ(-60deg) rotateY(var(--ry));
  -webkit-clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%);
          clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%);
}
.well.-front:after {
  height: 140px;
  -webkit-transform: rotateZ(60deg) rotateY(var(--ry));
          transform: rotateZ(60deg) rotateY(var(--ry));
  -webkit-clip-path: polygon(0 10px, 100% 0px, 100% 100%, 10px 100%, 0 calc(100% - 40px));
          clip-path: polygon(0 10px, 100% 0px, 100% 100%, 10px 100%, 0 calc(100% - 40px));
}
.well.-back:before {
  height: 110px;
  -webkit-transform: rotateZ(-60deg) rotateY(var(--ry));
          transform: rotateZ(-60deg) rotateY(var(--ry));
  -webkit-clip-path: polygon(0 calc(100% - 10px), 0 45px, 100% 0%, 100% 100%);
          clip-path: polygon(0 calc(100% - 10px), 0 45px, 100% 0%, 100% 100%);
}
.well.-back:after {
  height: 100px;
  -webkit-transform: rotateZ(60deg) rotateY(var(--ry));
          transform: rotateZ(60deg) rotateY(var(--ry));
  -webkit-clip-path: polygon(100% 100%, 0% calc(100% - 45px), 0% 10px, 100% 0%);
          clip-path: polygon(100% 100%, 0% calc(100% - 45px), 0% 10px, 100% 0%);
}
.side.-right .well {
  --ry: -30deg;
}

.side.-left .well:after {
  -webkit-animation: left-well-back-after var(--duration) linear infinite;
          animation: left-well-back-after var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes left-well-back-after {
  from, to {
    background: #373438;
  }
  25%, 90% {
    background: #000;
  }
}
@keyframes left-well-back-after {
  from, to {
    background: #373438;
  }
  25%, 90% {
    background: #000;
  }
}
.side.-left .well .well-plate {
  -webkit-animation: left-well-plate var(--duration) linear infinite;
          animation: left-well-plate var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes left-well-plate {
  from, to, 25% {
    background: #717476;
  }
  50% {
    background: #6D7174;
  }
  75% {
    background: #000;
  }
}
@keyframes left-well-plate {
  from, to, 25% {
    background: #717476;
  }
  50% {
    background: #6D7174;
  }
  75% {
    background: #000;
  }
}
.side.-left .well:before {
  -webkit-animation: left-well-back-before var(--duration) linear infinite;
          animation: left-well-back-before var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes left-well-back-before {
  from, to {
    background: #000;
  }
  50% {
    background: #747C7D;
  }
  55% {
    background: #909798;
  }
  75% {
    background: #000;
  }
}
@keyframes left-well-back-before {
  from, to {
    background: #000;
  }
  50% {
    background: #747C7D;
  }
  55% {
    background: #909798;
  }
  75% {
    background: #000;
  }
}
.side.-right .well:after {
  -webkit-animation: right-well-back-after var(--duration) linear infinite;
          animation: right-well-back-after var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes right-well-back-after {
  from, to, 25% {
    background: #000;
  }
  30% {
    background: #3A3F41;
  }
}
@keyframes right-well-back-after {
  from, to, 25% {
    background: #000;
  }
  30% {
    background: #3A3F41;
  }
}
.side.-right .well .well-plate {
  -webkit-animation: right-well-plate var(--duration) linear infinite;
          animation: right-well-plate var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes right-well-plate {
  from, to {
    background: #616263;
  }
  25% {
    background: #000;
  }
  50% {
    background: #42474B;
  }
}
@keyframes right-well-plate {
  from, to {
    background: #616263;
  }
  25% {
    background: #000;
  }
  50% {
    background: #42474B;
  }
}
.side.-right .well:before {
  -webkit-animation: right-well-back-before var(--duration) linear infinite;
          animation: right-well-back-before var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes right-well-back-before {
  from, to {
    background: #000;
  }
  20% {
    background: #202225;
  }
  30% {
    background: #000;
  }
  50% {
    background: #14161A;
  }
}
@keyframes right-well-back-before {
  from, to {
    background: #000;
  }
  20% {
    background: #202225;
  }
  30% {
    background: #000;
  }
  50% {
    background: #14161A;
  }
}
.well-plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.top-side {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 105px;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: rotateY(160deg);
          transform: rotateY(160deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.top-side:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 410px, 10px 410px, 85px 110px, 85px 590px, 45px 585px, 10px 410px, 0 410px);
          clip-path: polygon(100% 100%, 100% 0%, 0% 410px, 10px 410px, 85px 110px, 85px 590px, 45px 585px, 10px 410px, 0 410px);
  z-index: 2;
}
.side.-left > .top-side {
  -webkit-transform: rotateY(-160deg);
          transform: rotateY(-160deg);
}
.side.-left > .top-side:before {
  -webkit-animation: top-side-left var(--duration) linear infinite;
          animation: top-side-left var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes top-side-left {
  from, to, 25% {
    background: #9A9DA2;
  }
  50% {
    background: #9DA3A8;
  }
  75% {
    background: white;
  }
}
@keyframes top-side-left {
  from, to, 25% {
    background: #9A9DA2;
  }
  50% {
    background: #9DA3A8;
  }
  75% {
    background: white;
  }
}
.side.-right > .top-side:before {
  -webkit-animation: top-side-right var(--duration) linear infinite;
          animation: top-side-right var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes top-side-right {
  from, to {
    background: #878688;
  }
  25% {
    background: #737D86;
  }
  50%, 75% {
    background: #676D74;
  }
}
@keyframes top-side-right {
  from, to {
    background: #878688;
  }
  25% {
    background: #737D86;
  }
  50%, 75% {
    background: #676D74;
  }
}
.ball-bearing,
.windows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ball-bearing {
  z-index: 2;
  opacity: 0;
}

.windows {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-clip-path: polygon(85px 100px, 10px 410px, 45px 585px, 85px 590px);
          clip-path: polygon(85px 100px, 10px 410px, 45px 585px, 85px 590px);
  -webkit-transform: rotateY(5deg);
          transform: rotateY(5deg);
  background: rgba(0, 0, 0, 0.5);
}
.side.-left .windows {
  -webkit-transform: rotateY(-5deg);
          transform: rotateY(-5deg);
}

.window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.window:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.window.-driver {
  position: absolute;
  top: 220px;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #000, #000 20px, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px), #000);
}
.window.-passenger {
  position: absolute;
  top: 420px;
  left: 0;
  width: 100%;
  height: 170px;
  background: linear-gradient(to bottom, transparent, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px), #000);
}

.door {
  position: absolute;
  height: 200px;
  width: 100%;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.door.-front {
  top: 215px;
  left: 0;
  border-bottom: none;
}
.door.-back {
  top: 415px;
  left: 0;
  height: 185px;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: skewY(5deg);
          transform: skewY(5deg);
}

.front {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  top: -35px;
  left: 0;
  width: 100%;
  height: 455px;
  -webkit-transform-origin: left 35px;
          transform-origin: left 35px;
  -webkit-transform: rotateX(16deg);
          transform: rotateX(16deg);
}
.front > .frunk, .front > .windshield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(10% 100%, 0 35px, 40px 0, calc(100% - 40px) 0, 100% 35px, 90% 100%);
          clip-path: polygon(10% 100%, 0 35px, 40px 0, calc(100% - 40px) 0, 100% 35px, 90% 100%);
}

.windshield:before {
  border: 20px solid #111;
  border-width: 25px 40px 20px;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 325px;
  background: rgba(0, 0, 0, 0.5);
}
.windshield > .light {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, #000, #000 40%, transparent);
}
.windshield > .light:before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 15%;
  width: 70%;
  height: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.2);
}

.frunk:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 135px;
  -webkit-animation: frunk var(--duration) linear infinite;
          animation: frunk var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes frunk {
  from, to {
    background: #ABB1B4;
  }
  25% {
    background: #ABB1B4;
  }
  40% {
    background: #BCC4C8;
  }
  50% {
    background: #656C72;
  }
  75% {
    background: #9EA4A7;
  }
}
@keyframes frunk {
  from, to {
    background: #ABB1B4;
  }
  25% {
    background: #ABB1B4;
  }
  40% {
    background: #BCC4C8;
  }
  50% {
    background: #656C72;
  }
  75% {
    background: #9EA4A7;
  }
}
.back {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  height: 580px;
  width: 100%;
  top: 100%;
  position: absolute;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotateX(-27deg);
          transform: rotateX(-27deg);
}
.back:before {
  background: rgba(0, 0, 0, 0.8);
  border: 20px solid black;
  border-width: 20px 40px;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 185px;
  -webkit-clip-path: polygon(35px 0, calc(100% - 35px) 0, calc(100% - 20px) 100%, 20px 100%);
          clip-path: polygon(35px 0, calc(100% - 35px) 0, calc(100% - 20px) 100%, 20px 100%);
}

.trunk {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  top: 185px;
  height: 180px;
  width: calc(100% - 44px);
  left: 22px;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateX(-80deg);
          transform: rotateX(-80deg);
}
.trunk:before, .trunk:after {
  -webkit-animation: trunk var(--duration) linear infinite;
          animation: trunk var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes trunk {
  from, to {
    color: #51545F;
  }
  25%, 50% {
    color: #434950;
  }
  75% {
    color: #23252E;
  }
}
@keyframes trunk {
  from, to {
    color: #51545F;
  }
  25%, 50% {
    color: #434950;
  }
  75% {
    color: #23252E;
  }
}
.trunk:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.5);
  border: 20px solid currentColor;
}
.trunk:after {
  content: '';
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  height: 40px;
  background: currentColor;
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotateX(5deg);
          transform: rotateX(5deg);
}

.trunk-side {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  top: 0;
  width: 320px;
  height: 160px;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: skewY(7deg);
          transform: skewY(7deg);
}
.trunk-side:before {
  content: '';
  background-color: var(--c-top);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
}
.trunk-side:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 25px;
  background-color: #fff;
  bottom: 100%;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 100%, 0 100%);
  -webkit-animation: trunk-side-top var(--duration) linear infinite;
          animation: trunk-side-top var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes trunk-side-top {
  from, to {
    background: #4E4B4C;
  }
  25% {
    background: #969D9E;
  }
  50% {
    background: #575B5E;
  }
  75% {
    background: #3E4243;
  }
}
@keyframes trunk-side-top {
  from, to {
    background: #4E4B4C;
  }
  25% {
    background: #969D9E;
  }
  50% {
    background: #575B5E;
  }
  75% {
    background: #3E4243;
  }
}
.trunk-side.-left {
  left: 0;
  -webkit-transform: rotateY(-90deg) skewY(7deg);
          transform: rotateY(-90deg) skewY(7deg);
}
.trunk-side.-left:after {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
}
.trunk-side.-left:before {
  -webkit-animation: trunk-side-left-before var(--duration) linear infinite;
          animation: trunk-side-left-before var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes trunk-side-left-before {
  from, to {
    background: #3C2E2F;
  }
  25% {
    background: #3D4A5A;
  }
  50%, 75% {
    background: #292C33;
  }
}
@keyframes trunk-side-left-before {
  from, to {
    background: #3C2E2F;
  }
  25% {
    background: #3D4A5A;
  }
  50%, 75% {
    background: #292C33;
  }
}
.trunk-side.-right {
  left: 100%;
  -webkit-transform: rotateY(-90deg) skewY(7deg);
          transform: rotateY(-90deg) skewY(7deg);
}
.trunk-side.-right:after {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.trunk-side.-right:before {
  -webkit-animation: trunk-side-right-before var(--duration) linear infinite;
          animation: trunk-side-right-before var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes trunk-side-right-before {
  from, to, 25% {
    background: #4C4D53;
  }
  50% {
    background: #53595F;
  }
  75% {
    background: #555962;
  }
}
@keyframes trunk-side-right-before {
  from, to, 25% {
    background: #4C4D53;
  }
  50% {
    background: #53595F;
  }
  75% {
    background: #555962;
  }
}
.bed {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  height: 320px;
  background: #ddd;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotateX(91deg);
          transform: rotateX(91deg);
}
.bed:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(35px);
          transform: translateZ(35px);
  -webkit-animation: bed var(--duration) linear infinite;
          animation: bed var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes bed {
  from, to {
    background: #6E6C71;
  }
  25% {
    background: #C5CED1;
  }
  50% {
    background: #4E575E;
  }
  75% {
    background: #555D65;
  }
}
@keyframes bed {
  from, to {
    background: #6E6C71;
  }
  25% {
    background: #C5CED1;
  }
  50% {
    background: #4E575E;
  }
  75% {
    background: #555D65;
  }
}
.tailgate {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  bo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0