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