css实现8字赛道赛车玩具效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现8字赛道赛车玩具效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
:root {
  --player-one: "M61.27.5c45.13.16 68.384 25.592 96.354 57.072 27.98 31.47 41.564 54.925 75.536 54.478 33.972-.447 50.78-22.13 50.78-50.78 0-28.65-14.587-51.595-50.78-50.77-36.193.825-60.4 17.052-88.2 47.072-27.8 30.01-40.15 64.308-83.68 64.478C17.74 122.21.5 89.93.5 61.28.5 32.63 16.14.34 61.27.5z";
  --player-two: "M61.27 10.5c35.51-.132 57.97 19.3 85.94 50.78 27.98 31.47 41.78 60.92 85.95 60.77 44.18-.16 60.78-32.13 60.78-60.78S275.48.55 233.16.5C190.85.45 179.091 35.76 151.291 65.78c-27.8 30.01-56.388 46.395-90.011 46.269-33.623-.127-50.78-22.12-50.78-50.77 0-28.65 15.26-50.649 50.77-50.78z";
  --bridge-height: 16;
  --scale: 1;
  --angle: -56;
  --bank: 180;
  --guide: #14181f;
  --track: #5c6370;
  --track--two: #737b8c;
  --track--three: #8f96a3;
  --burm: #e6e6e6;
  --burm-dash: #bf4040;
  --bg: #19202e;
  --dirt: #c2ad70;
  --bridge--one: #666;
  --bridge--two: #808080;
  --bridge--three: #bfbfbf;
  --tail: #e61919;
  --head: #f5daa3;
  --tyre: #0d0d0d;
  --rim: #bfbfbf;
  --decal: #fff;
  --glass: #b3c3e6;
  --bumper: #808080;
  --check: rgba(13,13,13,0.5);
  --off-check: transparent;
}
.cuboid {
  --width: 15;
  --height: 10;
  --depth: 4;
  height: calc(var(--depth) * 1px);
  width: calc(var(--width) * 1px);
  transform-style: preserve-3d;
  position: absolute;
  font-size: 1rem;
  transform: translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), calc(var(--z, 0) * 1px)) rotate(calc(var(--r, 0) * 1deg));
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1px);
  width: 100%;
  transform-origin: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1px));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1px);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1px);
  width: calc(var(--depth) * 1px);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1px);
  width: calc(var(--depth) * 1px);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1px);
  width: calc(var(--width) * 1px);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1px);
  width: calc(var(--width) * 1px);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1px)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}
.bridge {
  height: 44px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(47deg) translate(0px, -4px);
}
.bridge__top {
  --width: 40;
  --x: 30;
}
.bridge__top--center {
  --height: 4;
  --depth: 44;
  --z: calc((var(--bridge-height) + 2) * -1);
  --y: 0;
  --r: 0;
}
.bridge__top--center div {
  background: linear-gradient(90deg, var(--guide), var(--guide)) 50% 36%/100% 1px no-repeat, linear-gradient(90deg, var(--guide), var(--guide)) 50% 58%/100% 1px no-repeat, var(--track--two);
}
.bridge__top--fence {
  --height: 10;
  --depth: 2;
  --z: calc((var(--bridge-height) + 6) * -1);
  --y: 0;
  --r: 0;
}
.bridge__top--fence div {
  background: var(--bridge--two);
}
.bridge__top--fence div:nth-of-type(1) {
  background: var(--bridge--one);
}
.bridge__top--fence div:nth-of-type(2) {
  background: var(--bridge--three);
}
.bridge__top--fence div:nth-of-type(2):after {
  content: "GO!";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  transform: rotate(180deg);
  font-size: 8px;
  line-height: 12px;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  background-image: linear-gradient(45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(-45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(45deg, var(--off-check) 75%, var(--check) 75%), linear-gradient(-45deg, var(--off-check) 75%, var(--check) 75%);
  background-size: 2px 2px;
  background-position: 0 0, 0 1px, 1px -1px, -1px 0px;
  text-transform: uppercase;
}
.bridge__top--right {
  --y: 42;
}
.bridge__top--right div:nth-of-type(2):after {
  opacity: 0;
}
.bridge__pillar {
  --width: 4;
  --depth: 44;
  --height: var(--bridge-height);
  --z: calc(var(--bridge-height) * -0.5);
}
.bridge__pillar div {
  background: var(--bridge--one);
}
.bridge__pillar div:nth-of-type(2) {
  background: var(--bridge--three);
}
.bridge__pillar div:nth-of-type(4) {
  background: #333;
}
.bridge__pillar--one {
  --x: 30;
  --y: 0;
}
.bridge__pillar--two {
  --x: 66;
  --y: 0;
}
.bridge__rail {
  --depth: 2;
  --height: calc(var(--bridge-height) + 11);
  --width: 36;
  --x: -6;
  --z: calc((var(--bridge-height) + 11) * -0.5);
}
.bridge__rail div:nth-of-type(1),
.bridge__rail div:nth-of-type(2),
.bridge__rail div:nth-of-type(5),
.bridge__rail div:nth-of-type(6) {
  background: transparent;
}
.bridge__rail div:nth-of-type(1) {
  --clip: polygon(0 0, 100% 100%, 100% 0);
}
.bridge__rail div:nth-of-type(2) {
  --clip: polygon(100% 0, 0 100%, 0 0);
}
.bridge__rail div:nth-of-type(1):after,
.bridge__rail div:nth-of-type(2):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bridge--three);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}
.bridge__rail div:nth-of-type(4) {
  background: transparent;
}
.bridge__rail div:nth-of-type(4):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 168%;
  background: var(--bridge--one);
  transform-origin: 50% 0%;
  transform: rotateX(-53deg);
}
.bridge__rail--two {
  --y: 42;
}
.bridge__rail--three {
  --y: 0;
  --x: 70;
  --r: 180;
}
.bridge__rail--four {
  --y: 42;
  --x: 70;
  --r: 180;
}
.bridge__ramp {
  --depth: 44;
  --height: calc(var(--bridge-height) + 4);
  --width: 30;
  --y: 0;
  --z: calc((var(--bridge-height) + 4) * -0.5);
}
.bridge__ramp--one {
  --x: 0;
}
.bridge__ramp--two {
  --x: 70;
  --r: 180;
}
.bridge__ramp div:nth-of-type(1),
.bridge__ramp div:nth-of-type(2),
.bridge__ramp div:nth-of-type(5),
.bridge__ramp div:nth-of-type(6) {
  background: transparent;
}
.bridge__ramp div:nth-of-type(1) {
  --clip: polygon(0 0, 100% 100%, 100% 0);
}
.bridge__ramp div:nth-of-type(2) {
  --clip: polygon(100% 0, 0 100%, 0 0);
}
.bridge__ramp div:nth-of-type(1):after,
.bridge__ramp div:nth-of-type(2):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}
.bridge__ramp div:nth-of-type(4) {
  background: transparent;
}
.bridge__ramp div:nth-of-type(4):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--bank, 100) * 1%);
  background: linear-gradient(var(--guide), var(--guide)) 41% 50%/1px 100% no-repeat, linear-gradient(var(--guide), var(--guide)) 64% 50%/1px 100% no-repeat, var(--track--three);
  transform-origin: 50% 0%;
  transform: rotateX(calc(var(--angle) * 1deg));
}
.race {
  transform: rotateX(-34deg) rotateY(-34deg) rotateX(-90deg) translate(-2%, 0);
}
.track {
  --width: 294.438px;
  --height: 122.55px;
  height: var(--height);
  width: var(--width);
  position: relative;
}
.road,
.burm,
.burm__dashes,
.markings,
.dirt {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: flat;
  overflow: visible !important;
}
.road path,
.burm path,
.burm__dashes path,
.markings path,
.dirt path {
  stroke: var(--color);
  stroke-width: var(--width);
}
.start {
  --check: #0d0d0d;
  position: absolute;
  height: 20px;
  width: 40px;
  left: 98%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: linear-gradient(45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(-45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(45deg, var(--off-check) 75%, var(--check) 75%), linear-gradient(-45deg, var(--off-check) 75%, var(--check) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
  background-color: #e6e6e6;
}
.dirt {
  --width: 50px;
  --color: var(--dirt);
}
.road {
  --width: 20px;
  --color: var(--track);
}
.markings {
  --width: 1px;
  --color: var(--guide);
}
.burm {
  --width: 30px;
  --color: var(--burm);
}
.burm__dashes {
  --width: 30px;
  --color: var(--burm-dash);
  stroke-dasharray: 4;
}
.car {
  height: 10px;
  width: 10px;
  offset-path: path(var(--path));
  offset-distance: 5%;
  position: absolute;
  transform-style: preserve-3d;
  top: 0px;
  left: 0px;
}
.car--one {
  --hue: 10;
  --speed: 3;
  --delay: -0.3;
  --path: var(--player-one);
  -webkit-animation: travel calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear, bridge--one calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear;
          animation: travel calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear, bridge--one calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.car--one .car__plane {
  -webkit-animation-name: rock--one;
          animation-name: rock--one;
}
.car--two {
  --hue: 220;
  --speed: 3;
  --delay: -0.8;
  --path: var(--player-two);
  -webkit-animation: travel calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear, bridge--two calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear;
          animation: travel calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear, bridge--two calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.car--two .car__plane {
  -webkit-animation-name: rock--two;
          animation-name: rock--two;
}
.car__plane {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-animation-duration: calc(var(--speed, 0) * 1s);
          animation-duration: calc(var(--speed, 0) * 1s);
  -webkit-animation-delay: calc(var(--delay, 0) * 1s);
          animation-delay: calc(var(--delay, 0) * 1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.car__body {
  --height: 3;
  --width: 14;
  --depth: 8;
  --z: -1.5;
  --x: -2;
  --y: 1;
}
.car__body div {
  background: hsl(var(--hue), 50%, 50%);
}
.car__body div:nth-of-type(1),
.car__body div:nth-of-type(2) {
  background: linear-gradient(var(--decal), var(--decal)) 50% 50%/2px 2px no-repeat, hsl(var(--hue), 50%, 30%);
}
.car__body div:nth-of-type(3),
.car__body div:nth-of-type(4) {
  background: linear-gradient(var(--bumper), var(--bumper)) 50% 0%/100% 1px no-repeat, hsl(var(--hue), 50%, 70%);
}
.car__body div:nth-of-type(3):after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(var(--head), var(--head)) 0 100%/2px 1px no-repeat, linear-gradient(var(--head), var(--head)) 100% 100%/2px 1px no-repeat;
}
.car__body div:nth-of-type(4):after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(var(--tail), var(--tail)) 0 100%/2px 1px no-repeat, linear-gradient(var(--tail), var(--tail)) 100% 100%/2px 1px no-repeat;
}
.car__cab {
  --height: 2;
  --z: -4;
  --depth: 8;
  --width: 7;
  --x: 0;
  --y: 1;
}
.car__cab div {
  background: hsl(var(--hue), 50%, 50%);
}
.car__cab div:nth-of-type(1),
.car__cab div:nth-of-type(2) {
  background: linear-gradient(var(--glass), var(--glass)) 75% 50%/2px 2px no-repeat, linear-gradient(var(--glass), var(--glass)) 25% 50%/2px 2px no-repeat, hsl(var(--hue), 50%, 30%);
}
.car__cab div:nth-of-type(3),
.car__cab div:nth-of-type(4) {
  background: linear-gradient(var(--glass), var(--glass)) 50% 50%/6px 2px no-repeat, hsl(var(--hue), 50%, 70%);
}
.car__spoiler {
  --height: 1;
  --width: 1;
  --depth: 8;
  --y: 1;
  --x: -3;
  --z: -4;
}
.car__spoiler div {
  background-color: #000;
}
.car__wheels {
  --height: 2;
  --width: 2;
  --depth: 10;
  --z: -1;
}
.car__wheels--rear {
  --x: 8;
}
.car__wheels div {
  background: var(--tyre);
}
.car__wheels div:nth-of-type(1),
.car__wheels div:nth-of-type(2) {
  background: linear-gradient(var(--rim), var(--rim)) 50% 50%/1px 1px no-repeat, var(--tyre);
}
body {
  background-color: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  transform: scale(1);
  overflow: hidden;
}
@media (min-width: 768px) {
  body {
    transform: scale(2);
  }
}
@media (min-width: 1200px) {
  body {
    transform: scale(3);
  }
}
@-webkit-keyframes travel {
  from {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}
@keyframes travel {
  from {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}
@-webkit-keyframes bridge--one {
  0%, 7%, 21%, 100% {
    transform: translate3d(0, 0, -1px);
  }
  11%, 17.5% {
    transform: translate3d(0, 0, calc((var(--bridge-height) + 6) * -1px));
  }
}
@keyframes bridge--one {
  0%, 7%, 21%, 100% {
    transform: translate3d(0, 0, -1px);
  }
  11%, 17.5% {
    transform: translate3d(0, 0, calc((var(--bridge-height) + 6) * -1px));
  }
}
@-webkit-keyframes bridge--two {
  0%, 6.25%, 20%, 100% {
    transform: translate3d(0, 0, -1px);
  }
  10%, 16.5% {
    transform: translate3d(0, 0, calc((var(--bridge-height) + 6) * -1px));
  }
}
@keyframes bridge--two {
  0%, 6.25%, 20%, 100% {
    transform: translate3d(0, 0, -1px);
  }
  10%, 16.5% {
    transform: translate3d(0, 0, calc((var(--bridge-height) + 6) * -1px));
  }
}
@-webkit-keyframes rock--one {
  0%, 6.9%, 11.1%, 17.4%, 21.1%, 100% {
    transform-origin: 50% 50%;
    transform: rotateY(0deg) translate3d(0, 0, 0);
  }
  7%, 11% {
    transform-origin: 0 50%;
    transform: rotateY(50deg) translate3d(8px, 0, 8px);
  }
  17.5%, 21% {
    transform-origin: 100% 50%;
    transform: rotateY(-50deg) translate3d(-8px, 0, 8px);
  }
}
@keyframes rock--one {
  0%, 6.9%, 11.1%, 17.4%, 21.1%, 100% {
    transform-origin: 50% 50%;
    transform: rotateY(0deg) translate3d(0, 0, 0);
  }
  7%, 11% {
    transform-origin: 0 50%;
    transform: rotateY(50deg) translate3d(8px, 0, 8px);
  }
  17.5%, 21% {
    transform-origin: 100% 50%;
    transform: rotateY(-50deg) translate3d(-8px, 0, 8px);
  }
}
@-we.........完整代码请登录后点击上方下载按钮下载查看