div实现简单的自行车布局效果代码-html代码-BFW代码库

div实现简单的自行车布局效果代码

代码语言：html

代码描述：div实现简单的自行车布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
 
  
  
  
<style>
.cartoon {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wheel {
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #ddd;
  top: 50%;
  left: 0;
  background: conic-gradient(from 26.5deg, white, black);
}

.wheel::before,
.wheel::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;
  border-radius: 50%;
  left: 150%;
  background: conic-gradient(from -26.5deg, white, black)
}

.wheel::before {
  width: 30%;
  height: 30%;
  top: 35%;
  left: 110%;
}

.frame {
  position: absolute;
  height: 30%;
  width: 30%;
  top: 40%;
  left: 20%;
  transform-origin: bottom right;
  transform: skewX(-26.5deg);
  box-shadow: inset -10vmin 0 9vmin -12vmin;
}

.frame::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  box-shadow: inset -10vmin 0 9vmin -12vmin;
}

.frame-2 {
  position: absolute;
  height: 35%;
  width: 30%;
  top: 35%;
  left: 50%;
  transform-origin: bottom right;
  transform: skewX(26.5deg);
  box-shadow: inset -10vmin 0 9vmin -12vmin;
}

.handlebar {
  position: absolute;
  width: 15%;
  height: 2.5%;
  border-radius: 5vmin;
  top:.........完整代码请登录后点击上方下载按钮下载查看