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__third::before, .akira-container .back-tire-arm__third::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 0%;
  transform: translate(-50%, 0%) rotate(45deg);
  margin-bottom: 1rem;
  width: calc(36 * var(--unit));
  height: calc(36 * var(--unit));
  background: #8f2814;
  border-radius: 2px;
}
.akira-container .back-tire-arm__third::before {
  background: linear-gradient(-135deg, transparent 47%, #bd1f09 48%);
}
.akira-container .back-tire-arm__third::after {
  left: 100%;
  background: linear-gradient(45deg, transparent 47%, #f1615c 48%);
}
.akira-container .middle-display1 {
  position: absolute;
  bottom: 53%;
  left: 42%;
  width: calc(60 * var(--unit));
  height: calc(30 * var(--unit));
  background: #8f2814;
  transform: rotate(35deg);
}
.akira-container .seat-front {
  position: absolute;
  bottom: 44%;
  left: 49.5%;
  width: calc(80 * var(--unit));
  height: calc(30 * var(--unit));
  transform: rotate(25deg);
  background: linear-gradient(200deg, #642c07, #3b2710 70%);
  box-shadow: 2px 2px 4px 1px #c15027 inset;
}
.akira-container .seat {
  position: absolute;
  bottom: 35%;
  left: 57%;
  width: calc(70 * var(--unit));
  height: calc(200 * var(--unit));
  transform: rotate(25deg);
}
.akira-container .seat__bottom {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: calc(70 * var(--unit));
  height: calc(40 * var(--unit));
  background: #642c07;
  transform: rotate(-20deg);
  border-radius: 20% 0 0 0;
  background: linear-gradient(#642c07 10%, #3b2710 30%);
  box-shadow: 1px 1px 2px 1px #81361a inset;
}
.akira-container .seat__bottom__kubomi {
  position: absolute;
  top: 8%;
  left: 10%;
  width: calc(33 * var(--unit));
  height: calc(18 * var(--unit));
  background: #f17d55;
  border-radius: 40% 40% 30% 30%;
  background: radial-gradient(circle at 5px 5px, #3b2710, #642c07);
  box-shadow: 2px 2px 5px -2px #642c07 inset, -2px -2px 4px 0px #81361a inset, 2px 2px 5px 0px #642c07;
}
.akira-container .seat__back {
  position: absolute;
  bottom: 12%;
  right: 5%;
  width: 16%;
  height: 78%;
  background: #642c07;
  background: linear-gradient(160deg, #4f3415 70%, #c15027 72%, #5a2806 74%);
  box-shadow: 2px 2px 2px 0px #642c07 inset;
}
.akira-container .seat__head {
  position: absolute;
  top: -6%;
  left: 93%;
  width: 16%;
  height: 20%;
  background: #4f3415;
  transform: rotate(35deg);
  border-radius: 0 0 0 3px;
}
.akira-container .body-tank {
  position: absolute;
  top: 46%;
  left: 33%;
  width: calc(210 * var(--unit));
  height: calc(121 * var(--unit));
  background: #782322;
  border-radius: 0% 0% 70% 20% / 0% 0% 70% 20%;
  transform: rotate(35deg);
  background: linear-gradient(200deg, #cc210a 10%, #8f2814 40%, #782322);
  box-shadow: 1px 4px 4px 1px #de1a13 inset;
}
.akira-container .body-tank__screw {
  position: absolute;
  top: -16%;
  left: 40%;
  width: calc(45 * var(--unit));
  height: calc(45 * var(--unit));
  border-radius: 50%;
  background: #f1615c;
  background: linear-gradient(200deg, #cc210a 20%, #982b15);
  box-shadow: 0px 4px 3px -2px #ef4a45 inset;
}
.akira-container .body-tank__screw__inner {
  position: absolute;
  width: 75%;
  height: 75%;
  background: #cc210a;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(200deg, #cc210a 20%, #982b15);
  box-shadow: 2px 4px 3px -1px #fa7e61 inset, -2px -4px 2px 0px #782322 inset, 3px 2px 5px 1px #8f2814;
}
.akira-container .body-tank__screw__inner__line {
  position: absolute;
  width: 20%;
  height: 100%;
  background: #8f2814;
  background: linear-gradient(200deg, #cc210a 10%, #b33219);
  box-shadow: 3px 0px 3px -1px #782322 inset, -2px 0px 2px -1px #cc210a inset;
}
.akira-container .body-seat {
  position: absolute;
  top: calc(100 * var(--unit));
  left: calc(270 * var(--unit));
  width: calc(470 * var(--unit));
  height: calc(260 * var(--unit));
}
.akira-container .body-seat__step1 {
  position: absolute;
  bottom: 25.3%;
  left: 0.4%;
  width: calc(70 * var(--unit));
  height: calc(20 * var(--unit));
  transform: rotate(60deg);
  overflow: hidden;
  background: linear-gradient(-3deg, #8f2814 50%, transparent 50%);
  box-shadow: 0px -2px 5px 0px #782322 inset;
}
.akira-container .body-seat__step2 {
  position: absolute;
  bottom: 7.5%;
  left: 9.8%;
  width: calc(95 * var(--unit));
  height: calc(19 * var(--unit));
  transform: rotate(25deg);
  overflow: hidden;
  background: linear-gradient(-5deg, #8f2814 68%, #f1615c 75%, transparent 80%);
  box-shadow: -1px -6px 4px -2px #782322 inset;
}
.akira-container .body-seat__bottom {
  position: absolute;
  bottom: 0%;
  left: 35%;
  width: calc(100 * var(--unit));
  height: calc(20 * var(--unit));
  background: #cc210a;
}
.akira-container .body-seat__bottom-box {
  position: absolute;
  bottom: 0%;
  left: 28%;
  width: calc(120 * var(--unit));
  height: calc(70 * var(--unit));
  background: #cc210a;
  overflow: hidden;
  background: linear-gradient(180deg, #cc210a 30%, #8f2814 80%, #6c201f);
}
.akira-container .body-seat__bottom-box__inner {
  position: absolute;
  bottom: 49%;
  left: -18%;
  width: calc(150 * var(--unit));
  height: calc(72 * var(--unit));
.........完整代码请登录后点击上方下载按钮下载查看