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.2 274.6 57.2 277.7 57.2 284.7 48.2 281.6 48.2 274.6" />
<polygon class="cls-28" points="48.2 264.6 57.2 267.6 57.2 274.6 48.2 271.6 48.2 264.6" />
<polygon class="cls-28" points="48.2 254.6 57.2 257.6 57.2 264.6 48.2 261.6 48.2 254.6" />
<polygon class="cls-28" points="45.4 314.7 36.3 317.8 36.3 324.8 45.4 321.7 45.4 314.7" />
<polygon class="cls-28" points="45.4 304.7 36.3 307.7 36.3 314.7 45.4 311.7 45.4 304.7" />
<polygon class="cls-28" points="45.4 294.7 36.3 297.7 36.3 304.7 45.4 301.6 45.4 294.7" />
<polygon class="cls-28" points="45.4 284.6 36.3 287.7 36.3 294.7 45.4 291.6 45.4 284.6" />
<polygon class="cls-28" points="45.4 274.6 36.3 277.6 36.3 284.6 45.4 281.6 45.4 274.6" />
<polygon class="cls-28" points="45.4 264.6 36.3 267.6 36.3 274.6 45.4 271.6 45.4 264.6" />
<polygon class="cls-28" points="45.4 254.6 36.3 257.6 36.3 264.6 45.4 261.5 45.4 254.6" />
<polygon class="cls-28" points="69.1 314.7 60.1 317.7 60.1 324.7 69.1 321.7 69.1 314.7" />
<polygon class="cls-28" points="69.1 304.7 60.1 307.7 60.1 314.7 69.1 311.7 69.1 304.7" />
<polygon class="cls-28" points="48.2 335.1 57.2 338.2 57.2 345.2 48.2 342.1 48.2 335.1" />
<polygon class="cls-28" points="48.2 325.1 57.2 328.1 57.2 335.1 48.2 332.1 48.2 325.1" />
<polygon class="cls-28" points="45.4 335.1 36.3 338.1 36.3 345.1 45.4 342.1 45.4 335.1" />
<polygon class="cls-28" points="45.4 325.1 36.3 328.1 36.3 335.1 45.4 332.1 45.4 325.1" />
<polygon class="cls-28" points="69.1 335.1 60.1 338.1 60.1 345.1 69.1 342.1 69.1 335.1" />
<polygon class="cls-28" points="69.1 325.1 60.1 328.1 60.1 335.1 69.1 332.1 69.1 325.1" />
<polygon class="cls-28" points="69.1 294.6 60.1 297.7 60.1 304.7 69.1 301.6 69.1 294.6" />
<polygon class="cls-28" points="69.1 284.6 60.1 287.6 60.1 294.6 69.1 291.6 69.1 284.6" />
<polygon class="cls-28" points="69.1 274.6 60.1 277.6 60.1 284.6 69.1 281.6 69.1 274.6" />
<polygon class="cls-28" points="69.1 264.6 60.1 267.6 60.1 274.6 69.1 271.6 69.1 264.6" />
<polygon class="cls-28" points="69.1 254.5 60.1 257.6 60.1 264.6 69.1 261.5 69.1 254.5" />
<g>
<polygon points="61.2 354.5 68 354.5 69.1 350.9 69.1 349 60.1 350.9 61.2 354.5" />
<polygon points="44.3 354.5 37.4 354.5 36.3 350.9 36.3 349 45.4 350.9 44.3 354.5" />
<polygon points="49.3 354.5 56.2 354.5 57.2 350.9 48.2 350.9 49.3 354.5" />
</g>
<g>
<path class="cls-29" d="M249 288.9h32v4.5a3.1 3.1 0 01-3 3.2h-25.8a3.1 3.1 0 01-3.1-3.2V289z" />
<polygon class="cls-30" points="270.4 296.6 274.1 296.6 276 288.9 272.3 288.9 270.4 296.6" />
</g>
<path d="M359 301.2h-10l-21.3-69a4.5 4.5 0 014.3-5.4h4.7z" transform="translate(0 -28.6)" />
<rect x="359.1" y="266" width="5.9" height="5.9" />
<g>
<rect x="111.1" y="289.7" width="35.2" height="13.2" rx="3.3" />
<rect class="cls-28" x="114.3" y="291.7" width="28.7" height="1.9" />
<rect class="cls-28" x="114.3" y="295.3" width="28.7" height="1.9" />
<rect class="cls-28" x="114.3" y="298.9" width="28.7" height="1.9" />
</g>
<g>
<rect x="235.9" y="202.8" width="2.7" height="159.6" />
<polygon points="347.2 287.1 347.2 359.7 273.5 359.7 273.5 362.3 347.2 362.3 347.2 362.4 349.8 362.4 349.8 287.1 347.2 287.1" />
<rect x="412.1" y="274.6" width="2.6" height="100.4" transform="rotate(90 427.7 310.6)" />
</g>
<g>
<rect class="cls-30" x="73" y="332" width="14.4" height="13.3" />
<rect class="cls-31" x="73" y="344.7" width="14.4" height="13.3" />
<rect x="73" y="305.3" width="14.4" height="26.8" fill="#ef3f3f" />
</g>
<rect class="cls-33" x="73" y="305.3" width="14.4" height="52.8" />
<g>
<path d="M164.9 202.8h43.7a9.2 9.2 0 019.3 9.3v65h0-62.2 0v-65a9.2 9.2 0 019.2-9.3z" stroke="#2d2d2d" fill=&q.........完整代码请登录后点击上方下载按钮下载查看