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="none" stroke-width="4" stroke-miterlimit="10" />
<polygon class="cls-27" points="187.7 275.9 192 275.9 201.3 204.1 197 204.1 187.7 275.9" />
<polygon class="cls-27" points="181.6 275.9 183.8 275.9 193.1 204.1 190.9 204.1 181.6 275.9" />
</g>
<path class="cls-35" d="M121 369s4.5-9.3 12.3-8.8h58.2a23 23 0 0117.4 8l13.7 39 14.7-.2-16.5-51s-5.5-12.5-15.3-12.5h-82.8c-9.2 0-14 12.5-14 12.5l-9.6 32.9 14.7-.1zM493 360.2h-78.7c-11-.2-14.6 8-14.6 8l-18 39-15.3-.2 22.1-51s5.1-12.6 13.3-12.6h71.6a2.4 2.4 0 011 .2l18.6 7.8z" transform="translate(0 -28.6)" />
<g>
<rect class="cls-31" x="467.5" y="298.1" width="26.4" height="11.4" />
<polygon class="cls-30" points="493.9 320.4 493.9 309 467.5 309 493.9 320.4" />
</g>
<polygon class="cls-33" points="467.5 309.5 493.9 320.4 493.9 298.1 467.5 298.1 467.5 309.5" />
<g>
<path d="M381.4 330.7l-.3 1h10.4a.5.5 0 00.6-.3 1.3 1.3 0 011.2-.6h2.7l-.3.9h15.2a1 1 0 01.9.4.7.7 0 01.1.8l-.5 1.4a12 12 0 01-.8 1.1l.9 1.6h-46.9c-.7 0-.9-.1-.9-.9v-1.7a.7.7 0 01.7-.7h13.2a.5.5 0 00.7-.4c.2-.8.6-1.5 1-2.3a.6.6 0 01.6-.4h1.6zm14.5 6v-.1a2.2 2.2 0 00-.5-.1h-17.8c-.5 0-.6-.2-.4-.6l.5-1.1c.2-.3.1-.6-.4-.6h-12.6c-.5 0-.5 0-.5.5v1.5c0 .6 0 .6.6.6h30.7zm-10.7-2.4h.2v1.5s0 .2.2.2a.8.8 0 001-.3l1.3-3 .2-.5c-.9-.1-.9-.1-1.2.6l-.6 1.1h-.1v-1.7a3 3 0 01-.4 0 .7.7 0 00-.8.5l-1 2.2a2.3 2.3 0 01-.1.3l-.2-3a1.1 1.1 0 00-1.4.6l-1.5 2a1.4 1.4 0 01-1.6.3l1.6-4a4.1 4.1 0 00-.8 0 .6.6 0 00-.4.3q-1 2-1.8 4.1c-.2.5-.1.6.3.6h2.6a.5.5 0 00.4-.2 1 1 0 011-.6c.7 0 .7 0 .8.7l.1.1h1.1a.4.4 0 00.5-.3l.6-1.5zm25.6 2.4l-1-1.8c.8.2 1-.3 1.3-.9 0-.4.2-.7.4-1.1s0-.7-.5-.7h-1.5a.4.4 0 00-.5.3l-1 2-.7 1.6c.8.2 1 .1 1.2-.5l.4-.7.7 1.5a.4.4 0 00.5.3h.7zm-13.5 0l-1-2c1 .3 1-.4 1.3-1l.4-.8c.2-.5 0-.7-.5-.7H396a.5.5 0 00-.6.3l-1.4 3.1-.2.5c.8.2 1 .1 1.2-.5l.4-.8.7 1.5.3.3a5.8 5.8 0 00.9 0zm-10.4-.6h2.4a1 1 0 00.6-.4 7.4 7.4 0 00.5-1.1l.6-1.5c.2-.5 0-1-.6-1H389a.4.4 0 00-.5.4l-1.5 3.4a2.6 2.6 0 000 .2zm8.5-4.8h-2.2a1 1 0 00-.9.6l-.4 1-.8 2.2c-.2.8 0 1 .7 1h1.5a.4.4 0 00.3-.1 6.7 6.7 0 00.3-.9h-1.2c-.5 0-.5 0-.4-.4l1-2.2a.6.6 0 01.4-.2h1.1a.4.4 0 00.3-.2 6.5 6.5 0 00.3-.8zm6 1c-.8-.2-.8-.2-1.1.6l-1 2.1c-.2.5-.6.6-1 .3l1.3-3h-.7a.4.4 0 00-.3 0c-.5 1-1 2-1.4 3.2-.1.4 0 .7.5.7h1.3a.8.8 0 00.9-.5l1-2.2.6-1.3zm7.4 0h-2.1a.6.6 0 00-.7.4l-1.3 3-.3.5h2c.8 0 .9-.1 1-.8h-1.6c.2-.8.2-.8 1-.8h.3c.6 0 .6 0 .7-.6l-1.4-.1.1-.3a.6.6 0 01.7-.5 4.2 4.2 0 001 0 .5.5 0 00.3-.3 3.5 3.5 0 00.3-.6zm-3 0h-2a.9.9 0 00-.8.4l-.4.8a.6.6 0 00.2.7 3.9 3.9 0 01.7.6.5.5 0 01.1.4l-.4.2h-.9c-.6 0-.7 0-.8.8h1.6a1.4 1.4 0 001.6-1.2.6.6 0 00-.2-.7 4 4 0 01-.7-.6l-.2-.4a.7.7 0 01.5-.2h1a.5.5 0 00.4-.2 6.3 6.3 0 00.3-.7zm-5.7 4a3.7 3.7 0 01.5 0 .6.6 0 00.7-.5l.8-2 .7-1.5c-.9-.2-.9-.2-1.2.6l-.2.4zm9.4.5v-.1a2.5 2.5 0 00-.5-.1h-11.4v.1a2 2 0 00.4.2h11.1z" transform="translate(0 -28.6)" />
<path d="M371.6 336.4a1 1 0 110-1.9 1 1 0 011 1 1 1 0 01-1 .9zm0-1.5a.6.6 0 00-.6.5.6.6 0 001.1 0 .6.6 0 00-.5-.5zM367.5 336.4a1 1 0 01-1-1 1 1 0 012 0 1 1 0 01-1 1zm0-.4a.6.6 0 00.6-.6.6.6 0 10-.6.6zM376.4 336.3c-.3 0-.4 0-.6-.2s-.8-.3-1 0-.2.2-.5.1l.7-1.5a.4.4 0 01.7 0l.7 1.6zm-1.3-.7h.5l-.3-.6zM369.5 335.2c.4-.2.4-.8 1-.6l-.3.5a1.3 1.3 0 00-.4 1l-.3.2-.2-.2c.1-.5-.3-.9-.6-1.3a1.1 1.1 0 010-.2c.5-.2.5.4.8.6zM373.4 335a1 1 0 01-.3 0 2 2 0 01-.3-.2 1 1 0 01.3-.2h1c.4 0 .3 0 .3.3h-.6v1.2l-.2.3-.2-.3v-1.2zM365.7 334.9v1.1c0 .2 0 .3-.2.3a.4.4 0 01-.2-.3v-1.1a2 2 0 01-.4 0l-.2-.1c-.1-.2.1-.2.2-.2h1.3l.2.1c.2.1-.2.2-.2.2a1.9 1.9 0 01-.5 0zM383 333.6v.4c0 .7 0 .7-.8.5l.6-1zM409.2 334a3.8 3.8 0 01.5-.8c0-.2.4-.1.6-.2a1.1 1.1 0 010 .5c-.2.6-.4.6-1 .5zM395.8 334a7.8 7.8 0 01.3-.9c.1-.3.4-.1.6-.1a.6.6 0 01.2.4c-.2.5-.4.6-1.1.5zM388.3 335.2a3.2 3.2 0 010-.3l.7-1.6a.6.6 0 01.4-.2 2.5 2.5 0 01.6 0 3.5 3.5 0 01-.2.6c0 .3-.2.6-.3.8-.4.7-.4.8-1.2.7z" transform="translate(0 -28.6)" />
<path class="cls-36" d="M396 336.7H364.6c-.5 0-.5 0-.5-.5v-1.5c0-.5 0-.5.5-.5h12.7c.4 0 .5 0 .3.5l-.5 1c-.2.4 0 .7.4.7h17.9a2.2 2.2 0 01.4.1zm-24.4-.3a1 1 0 001-1 1 1 0 00-1-.9 1 1 0 100 1.9zm-4.1 0a1 1 0 001-1 1 1 0 00-2 0 1 1 0 001 1zm9-.1l-.8-1.6a.4.4 0 00-.7 0l-.7 1.6c.3 0 .5 0 .6-.2s.8-.3.9 0 .3.2.6.2zm-7-1c-.3-.2-.3-.9-.9-.6a1.1 1.1 0 00.1.2c.3.4.7.7.6 1.3l.3.1.2-.2a1.3 1.3 0 01.4-1l.3-.4c-.6-.3-.6.3-1 .5zm3.9-.3v1c0 .2.1.3.2.3l.2-.2V335h.6c0-.4 0-.4-.2-.4H373a1 1 0 00-.4.1 2 2 0 00.4.2 1 1 0 00.3 0zm-7.7 0a1.9 1.9 0 00.5 0l.1-.2-.1-.1h-1.3l-.2.1c-.1.1.1.2.2.2a2 2 0 00.4 0v1a.4.4 0 00.2.4c.2 0 .2-.1.2-.3z" transform="translate(0 -28.6)" />
<path class="cls-36" d="M385.2 334.3l-.6 1.5a.4.4 0 01-.4.3H383v-.1c-.1-.7-.1-.7-.8-.7a1 1 0 00-1 .5.5.5 0 01-.5.3h-2.6c-.4 0-.5-.2-.3-.6l1.8-4.1a.6.6 0 01.4-.3 4.1 4.1 0 01.8 0l-1.6 4a1.4 1.4 0 001.6-.4l1.6-2a1.1 1.1 0 011.3-.4l.1 2.8h.1a2.3 2.3 0 00.2-.2l.9-2.2a.7.7 0 01.8-.5 3 3 0 00.4 0v1.7h..........完整代码请登录后点击上方下载按钮下载查看