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