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

css布局实现摩托车效果代码

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