css布局实现摩托车效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现摩托车效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>

:root {
  --size: 50;
  --unit: calc((var(--size) / 500) * 1vmin);
}

*,
*::after,
*::before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  background: #9b1908;
  min-height: 100vh;
  overflow: hidden;
  background: #9b1908;
}

.Centering, .akira-container, .akira-container .front-tire__rim, .akira-container .front-tire__wheel, .akira-container .front-tire__wheel .naritasan::before, .akira-container .back-tire__wheel, .akira-container .back-tire__wheel__center, .akira-container .back-tire__b-screw__inner, .akira-container .back-tire__s-screw__inner, .akira-container .body-tank__screw__inner, .akira-container .body-tank__screw__inner__line, .akira-container .front-fender__inner__logo__circle, .akira-container .front-fender__inner__logo__circle__star, .akira-container .front-fork .bnw__inner, .akira-container .front-deck3__handle::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.akira-container {
  position: fixed;
  width: calc(900 * var(--unit));
  height: calc(500 * var(--unit));
}
.akira-container .big-shadow {
  width: 85%;
  height: 14%;
  background: radial-gradient(rgba(32, 21, 14, 0.8) 30%, transparent);
  filter: blur(8px);
  position: absolute;
  top: 79%;
  left: 50%;
  transform: translate(-50%, -79%);
  border-radius: 50%;
}
.akira-container .small-shadow-front {
  width: 20%;
  height: 8%;
  background: radial-gradient(rgba(0, 0, 0, 0.8) 30%, transparent);
  filter: blur(6px);
  position: absolute;
  top: 77%;
  left: 20%;
  transform: translate(-50%, -79%);
  border-radius: 50%;
}
.akira-container .small-shadow-back {
  width: 26%;
  height: 10%;
  background: radial-gradient(rgba(0, 0, 0, 0.8) 30%, transparent);
  filter: blur(9px);
  position: absolute;
  top: 77%;
  left: 83%;
  transform: translate(-50%, -79%);
  border-radius: 50%;
}
.akira-container .small-shadow-middle {
  width: 42%;
  height: 15%;
  background: radial-gradient(rgba(20, 13, 9, 0.8) 30%, transparent);
  filter: blur(9px);
  position: absolute;
  top: 78%;
  left: 55%;
  transform: translate(-50%, -79%);
  border-radius: 50%;
}
.akira-container .front-tire {
  position: absolute;
  bottom: calc(120 * var(--unit));
  left: calc(60 * var(--unit));
  width: calc(180 * var(--unit));
  height: calc(180 * var(--unit));
  border-radius: 50%;
  background: #242525;
  box-shadow: 2px 2px 20px -10px #e0e5e9 inset, -10px -10px 20px black inset;
}
.akira-container .front-tire__rim {
  position: absolute;
  width: 71%;
  height: 71%;
  border-radius: 50%;
  background: #6b6b6b;
}
.akira-container .front-tire__wheel {
  position: absolute;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background: #cc210a;
  background: radial-gradient(circle at 10px 10px, #f1615c, #cc210a, #8f2814, #782322);
  box-shadow: -5px -5px 15px #3c1211 inset;
}
.akira-container .front-tire__wheel:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  left: 5%;
  opacity: 0.8;
  height: 100%;
  width: 90%;
  filter: blur(5px);
  z-index: 2;
}
.akira-container .front-tire__wheel:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6) 14%, rgba(255, 255, 255, 0) 24%);
  transform: translateX(calc(-40 * var(--unit))) translateY(calc(-40 * var(--unit))) skewX(-20deg);
  filter: blur(7px);
}
.akira-container .front-tire__wheel .naritasan {
  position: absolute;
  top: 38%;
  left: 10%;
  color: #686ba9;
  font-size: calc(12 * var(--unit));
  line-height: 1;
  writing-mode: vertical-lr;
  transform: scaleY(0.7) skew(-2deg) rotate(-5deg);
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.akira-container .front-tire__wheel .naritasan::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  padding: calc(22 * var(--unit)) calc(10 * var(--unit));
  border-radius: 50%;
  background: #eccd62;
  border: calc(3 * var(--unit)) solid #686ba9;
  z-index: -1;
}
.akira-container .front-tire__wheel .triangle-base {
  position: absolute;
  top: 15%;
  left: 31%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(41.5 * var(--unit)) calc(23 * var(--unit)) 0 calc(23 * var(--unit));
  border-color: #eccd62 transparent transparent transparent;
}
.akira-container .front-tire__wheel .triangle {
  position: absolute;
  top: 17%;
  left: 34%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(17 * var(--unit)) calc(9 * var(--unit)) 0 calc(9 * var(--unit));
  border-color: #230204 transparent transparent transparent;
}
.akira-container .front-tire__wheel .triangle:nth-child(3) {
  left: 52%;
}
.akira-container .front-tire__wheel .triangle:nth-child(2n) {
  left: 43%;
  top: 32%;
}
.akira-container .front-tire__wheel .triangle-circle {
  position: absolute;
  top: 22%;
  left: 45%;
  width: calc(11.5 * var(--unit));
  height: calc(11.5 * var(--unit));
  background: #cc210a;
  border-radius: 50%;
}
.akira-container .front-tire__wheel .shoei__triangle__left {
  position: absolute;
  bottom: 11.5%;
  left: 28.5%;
  transform: rotate(33deg);
  width: calc(16 * var(--unit));
  height: calc(16 * var(--unit));
  background: #fff;
  border: 2px solid #686ba9;
}
.akira-container .front-tire__wheel .shoei__triangle__right {
  position: absolute;
  bottom: 18.5%;
  left: 63.5%;
  transform: rotate(33deg);
  width: calc(16 * var(--unit));
  height: calc(16 * var(--unit));
  background: #fff;
  border: 2px solid #686ba9;
}
.akira-container .front-tire__wheel .shoei__base {
  position: absolute;
  bottom: 10%;
  left: -50%;
  transform: rotate(-10deg);
  width: calc(220 * var(--unit));
  height: calc(120 * var(--unit));
  background: radial-gradient(transparent 0% 45%, #686ba9 45% 47%, #fff 50% 100%);
  border: 2px solid #686ba9;
  border-radius: 50%;
  clip-path: polygon(40.4% 64.13%, 62.92% 33.8%, 60.16% 103.46%, 41.65% 103.47%);
}
.akira-container .front-tire__wheel .shoei__letter {
  position: absolute;
  font-weight: 900;
  color: #686ba9;
  font-size: calc(16 * var(--unit));
  font-family: "Titillium Web", sans-serif;
}
.akira-container .front-tire__wheel .l1 {
  top: 70%;
  left: 33%;
  transform: rotate(-3deg);
}
.akira-container .front-tire__wheel .l2 {
  top: 70%;
  left: 42%;
  transform: rotate(-7deg);
}
.akira-container .front-tire__wheel .l3 {
  top: 67.5%;
  left: 51%;
  transform: rotate(-6deg);
}
.akira-container .front-tire__wheel .l4 {
  top: 66%;
  left: 60%;
  transform: rotate(-12deg);
}
.akira-container .front-tire__wheel .l5 {
  top: 64%;
  left: 68%;
  transform: rotate(-16deg);
}
.akira-container .back-tire {
  position: absolute;
  bottom: calc(120 * var(--unit));
  right: calc(60 * var(--unit));
  width: calc(200 * var(--unit));
  height: calc(200 * var(--unit));
  border-radius: 50%;
  background: #242525;
  box-shadow: 6px 6px 20px -4px #546776 inset, -5px -5px 25px black inset;
  overflow: hidden;
}
.akira-container .back-tire__shadow {
  position: absolute;
  transform: rotate(-35deg);
  bottom: calc(-30 * var(--unit));
  right: calc(60 * var(--unit));
  width: calc(180 * var(--unit));
  height: calc(250 * var(--unit));
  background: linear-gradient(-70deg, transparent, rgba(0, 0, 0, 0.6));
}
.akira-container .back-tire__wheel {
  position: absolute;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(circle at 10px 10px, #fa7e61, #f1615c, #cc210a, #8f2814, #782322);
}
.akira-container .back-tire__wheel__center {
  position: absolute;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: linear-gradient(-200deg, #f1615c, #cc210a, #8f2814);
}
.akira-container .back-tire__b-screw {
  position: absolute;
  top: 30%;
  left: 63%;
  width: calc(32 * var(--unit));
  height: calc(32 * var(--unit));
  border-radius: 50%;
  background: #8f2814;
  background: radial-gradient(circle at 10px 10px, #fa7e61, #f1615c, #cc210a, #8f2814, #782322);
}
.akira-container .back-tire__b-screw__inner {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: #cc210a;
}
.akira-container .back-tire__s-screw {
  position: absolute;
  top: 70%;
  left: 45%;
  width: calc(22 * var(--unit));
  height: calc(22 * var(--unit));
  border-radius: 50%;
  background: #8f2814;
  background: radial-gradient(circle at 5px 5px, #fa7e61, #f1615c, #cc210a, #8f2814, #782322);
}
.akira-container .back-tire__s-screw__inner {
  position: absolute;
  width: 79%;
  height: 79%;
  border-radius: 50%;
  background: #cc210a;
}
.akira-container .back-tire-arm {
  position: absolute;
  top: calc(182 * var(--unit));
  right: calc(178 * var(--unit));
  width: calc(100 * var(--unit));
  height: calc(130 * var(--unit));
  transform: rotate(-65deg);
  z-index: 10;
}
.akira-container .back-tire-arm__first {
  position: absolute;
  bottom: 27%;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(70 * var(--unit));
  height: calc(60 * var(--unit));
  background: #8f2814;
  background: linear-gradient(-90deg, #f1615c 20%, #cc210a 22%, #cc210a 78%, #8f2814 80%);
  clip-path: polygon(-62.03% -41.88%, 105.54% -21.65%, 106.09% 77.44%, 76.53% 113%, 38.74% 107.23%, 1.53% 83.21%);
}
.akira-container .back-tire-arm__second {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%, -10%);
  margin-bottom: 1rem;
  width: calc(70 * var(--unit));
  height: calc(50 * var(--unit));
  background: #782322;
  background: linear-gradient(-90deg, #f1615c 20%, #cc210a 22%, #cc210a 78%, #8f2814 80%);
  box-shadow: 0px 4px 3px #782322;
}
.akira-container .back-tire-arm__third {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translate(-50%, 0%);
  margin-bottom: 1rem;
  width: calc(70 * var(--unit));
  height: calc(48 * var(--unit));
  background: #8f2814;
  background: linear-gradient(0deg, #cc210a 79%, #b41d09 85%);
  box-shadow: 0px 2px 3px #782322;
}
.akira-container .back-tire-arm__t.........完整代码请登录后点击上方下载按钮下载查看