纯css布局实现一个出租车动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css布局实现一个出租车动画效果

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

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

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

/* Generic */
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  cursor: pointer;
  background-color: #69D7C6;
}

/* CUBECENTER */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* CUBE */
.face {
  position: absolute;
}

/***************/
.main {
  width: 26vw;
  height: 13vw;
  -webkit-animation: 8s main linear infinite;
  animation: 8s main linear infinite;
}

.taxi,
.shadows {
  position: absolute;
  width: 26vw;
  height: 13vw;
  -webkit-transform: perspective(10000px) rotateX(60deg) rotateZ(45deg) translateZ(-7vw);
  transform: perspective(10000px) rotateX(60deg) rotateZ(45deg) translateZ(-7vw);
}

.taxi {
  -webkit-animation: .15s taxi linear infinite;
  animation: .15s taxi linear infinite;
}

.shadows {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(90%, #377e84), to(#3B888F));
  background-image: -webkit-linear-gradient(top, #377e84 90%, #3B888F);
  background-image: -o-linear-gradient(top, #377e84 90%, #3B888F);
  background-image: linear-gradient(to bottom, #377e84 90%, #3B888F);
  -webkit-animation: .15s shadows linear infinite;
  animation: .15s shadows linear infinite;
}

.shadow-a {
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: -30%;
  background-color: #3B888F;
}

.shadow-b {
  position: absolute;
  width: 14vw;
  height: 7vw;
  bottom: -10vw;
  left: 20%;
  background-color: #3B888F;
}

.shadow-b::before {
  content: '';
  position: absolute;
  width: 30%;
  height: 100%;
  right: -10%;
  background-color: #3B888F;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
}

.shadow-c {
  position: absolute;
  width: 7vw;
  height: 7vw;
  bottom: -13vw;
  left: 30%;
  background-color: #3B888F;
}

/*--------*/
.base-a {
  width: 26vw;
  height: 6.5vw;
  -webkit-transform: translateZ(3vw);
  transform: translateZ(3vw);
}

.base-a__front {
  width: 26vw;
  height: 1vw;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(12vw);
  transform: rotateX(-90deg) translateZ(12vw);
}

.base-a__back {
  width: 26vw;
  height: 1vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-1vw);
  transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-1vw);
}

.base-a__right {
  width: 13vw;
  height: 1vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-13vw) translateY(-1vw);
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-13vw) translateY(-1vw);
}

.base-a__left {
  width: 13vw;
  height: 1vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}

.base-a__top {
  width: 26vw;
  height: 13vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: translateZ(1vw);
  transform: translateZ(1vw);
}

.base-a__bottom {
  width: 26vw;
  height: 13vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-26vw);
  transform: rotateY(180deg) translateX(-26vw);
}

.base-a__front {
  background-color: #CDC5B6;
}

.base-a__back {
  background-color: #F7F8F3;
}

.base-a__right {
  background-color: #F7F8F3;
}

.base-a__left {
  background-color: #CDC5B6;
}

.base-a__top {
  background-color: #F7F8F3;
}

.base-a__bottom {
  background-color: #CDC5B6;
}

.base-b {
  width: 25.5vw;
  height: 6.25vw;
  left: .25vw;
  top: .25vw;
  -webkit-transform: translateZ(4vw);
  transform: translateZ(4vw);
}

.base-b__front {
  width: 25.5vw;
  height: 3vw;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: rotateX(-90deg) translateZ(9.5vw);
  transform: rotateX(-90deg) translateZ(9.5vw);
}

.base-b__back {
  width: 25.5vw;
  height: 3vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateX(-25.5vw) translateY(-3vw);
  transform: rotateX(-90deg) rotateY(180deg) translateX(-25.5vw) translateY(-3vw);
}

.base-b__right {
  width: 12.5vw;
  height: 3vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(90deg) rotateZ(-90deg) translateZ(25.5vw) translateX(-12.5vw) translateY(-3vw);
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(25.5vw) translateX(-12.5vw) translateY(-3vw);
}

.base-b__left {
  width: 12.5vw;
  height: 3vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
}

.base-b__top {
  width: 25.5vw;
  height: 12.5vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: translateZ(3vw);
  transform: translateZ(3vw);
}

.base-b__bottom {
  width: 25.5vw;
  height: 12.5vw;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(180deg) translateX(-25.5vw);
  transform: rotateY(180deg) translateX(-25.5vw);
}

.base-b__front {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#bfad80), to(#b6a26f));
  background-image: -webkit-linear-gradient(top, #bfad80, #b6a26f);
  background-image: -o-linear-gradien.........完整代码请登录后点击上方下载按钮下载查看