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

css实现8字赛道赛车玩具效果代码

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