css布局实现SUV越野车运动效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现SUV越野车运动效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.container {
  height: 100vh;
  width: 4000vw;
  display: flex;
  flex-flow: column wrap;
  z-index: -3;
  background: linear-gradient(#ffd272, #ffaf96, #ffcfdf, #b0f3f1 55%);
}

.bg {
 
  background-repeat: repeat-x;
  background-size: contain;
  height: 100vw;
  width: 4000vw;
  z-index: 1;
  margin-top: 1.5em;
  margin-right: 10em;
}
.nubes {
  z-index: 2;
}

.sun {
  height: 10em;
  width: 10em;
  border-radius: 50%;
  background: radial-gradient(circle at 100%, #ffd272 40%, #ffaf96);
  position: fixed;
  margin: 5em 0 0 10em;
  z-index: 0;
}

.machito {
  position: fixed;
  z-index: 2;
  height: 150%;
    margin-top: 2.5em;
  }

.cls-4 {
  fill: #a25439;
}
.cls-3 {
  fill: #e06244;
}
.cls-3,
.cls-4,
.cls-5,
.cls-6 {
  stroke: #7f4925;
}
.cls-3,
.cls-33,
.cls-4,
.cls-46,
.cls-5,
.cls-6 {
  stroke-miterlimit: 10;
}
.cls-5 {
  fill: #e2865d;
}
.cls-6 {
  fill: #af6854;
}
.cls-11 {
  opacity: 0.9;
}
.cls-12 {
  fill: #fcfcfc;
}
.cls-13 {
  fill: #f9f9fa;
}
.cls-14 {
  fill: #fbfbfc;
}
.cls-15 {
  fill: #f0f1f3;
}
.cls-16 {
  fill: #f2f3f4;
}
.cls-17 {
  fill: #f1f2f4;
}
.cls-18 {
  fill: #f3f4f5;
}
.cls-19 {
  fill: #f6f7f8;
}
.cls-20 {
  fill: #f5f6f7;
}
.cls-21 {
  fill: #f8f8f9;
}
.cls-22 {
  fill: #fafafa;
}
.cls-24 {
  fill: #161616;
}
.cls-27 {
  fill: #6b6b6b;
}
.cls-28 {
  fill: #2d2d2d;
}
.cls-29 {
  fill: #c6c8c9;
}
.cls-30 {
  fill: #fff;
}
.cls-31 {
  fill: #f90;
}
.cls-33 {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
.cls-35 {
  fill: #b7b7b7;
}
.cls-36 {
  fill: #eaeaea;
}
.cls-38 {
  fill: #a5a4a8;
}
.cls-43 {
  fill: #231f20;
}
.cls-45 {
  fill: #262626;
}
.cls-46 {
  fill: #381d0e;
  stroke: #c1a990;
  stroke-width: 0.25px;
}
.cls-49 {
  fill: #facbcb;
}

@media(min-height: 320px) {
  .machito{
    margin-top: 5em;
    
  }
  
}


@media(min-height: 500px) {
  .machito{
    margin-top: 10em;
    
  }
  
}
</style>

</head>
<body translate="no">
<div class="container">
<div class="bg"></div>
<div class="sun"></div>
<svg class="machito" width="200mm" height="150mm" viewBox="0 0 1000 1000">
<defs>
<linearGradient id="linear-gradient" x1="523" y1="361.8" x2="1103.4" y2="361.8" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffffd2" />
<stop offset="1" stop-color="#ffffd2" stop-opacity="0" />
</linearGradient>
</defs>
<g id="carpa" class="carpa">
<rect x="87.4" y="121.8" width="244.8" height="46.4" rx="8.5" fill="#d35635" />
<rect class="cls-24" x="153" y="121.8" width="13.7" height="46.4" />
<rect class="cls-24" x="245.4" y="121.8" width="13.7" height="46.4" />
</g>
<g id="camioneta" class="camioneta">
<path d="M493 316.2l-134.5-15.4-23.5-79.3a11 11 0 00-10.6-8.4H97.3a11 11 0 00-11 11.1L73 314.9v74h38s9-41.4 55-41.4c54.9 0 59.4 59.7 59.4 59.7h148.7s17.3-38.9 36.8-49.5 82-5.1 82-5.1z" transform="translate(0 -28.6)" fill="#d8d8d8" />
<path d="M212 202.8H103.5c-3.2 0-5.8 3.2-5.8 7.1l-10 67.2h130.2V210c0-3.9-2.7-7-6-7z" stroke-width="4" stroke="#161616" stroke-miterlimit="10" />
<polygon class="cls-27" points="120.4 275.9 124.7 275.9 134.1 204.1 129.8 204.1 120.4 275.9" />
<polygon class="cls-27" points="114.3 275.9 116.5 275.9 125.9 204.1 123.7 204.1 114.3 275.9" />
<rect x="32.5" y="248.5" width="40.5" height="102.6" rx="14.2" />
<polygon points="44.3 245.2 37.4 245.2 36.3 248.8 36.3 250.7 45.4 248.8 44.3 245.2" />
<polygon points="61.2 245.2 68 245.2 69.1 248.8 69.1 250.7 60.1 248.8 61.2 245.2" />
<polygon points="56.2 245.2 49.3 245.2 48.2 248.8 57.2 248.8 56.2 245.2" />
<polygon class="cls-28" points="48.2 314.7 57.2 317.8 57.2 324.8 48.2 321.7 48.2 314.7" />
<polygon class="cls-28" points="48.2 304.7 57.2 307.8 57.2 314.7 48.2 311.7 48.2 304.7" />
<polygon class="cls-28" points="48.2 294.7 57.2 297.7 57.2 304.7 48.2 301.7 48.2 294.7" />
<polygon class="cls-28" points="48.2 284.6 57.2 287.7 57.2 294.7 48.2 291.6 48.2 284.6" />
<polygon class="cls-28" points="48..........完整代码请登录后点击上方下载按钮下载查看