svg+css实现卡车行驶动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现卡车行驶动画效果代码，点击鼠标可实现卡车前轮飞起来加速效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  

  
<style>
/* Background  */
.bg-obj {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #df9aff;
  background: rgb(223,154,255);
background: radial-gradient(circle, rgba(223,154,255,1) 48%, rgba(178,121,204,1) 83%);
}

/* Car  */
.car-obj {
  position: absolute;
  top: calc(50% + 5px);
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50px 0;
  transition: all 0.4s ease;
}

/* Events  */
.car-obj.on {
  transform: translate(-50%, -50%) rotate(-25deg);
}

.road-object {
  width: 40%;
  height: 3px;
  background: rgba(0, 0, 0, 0.41);
  position: absolute;
  top: calc(50% + 52px);
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 8px 15px 1px #000000;
}

.streetlgiht {
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(100%, -50%);
  animation: moveBack 2s ease infinite;
}

.buildings {
  position: absolute;
  top: calc(50% - 50px);
  left: 50%;
  transform: translate(100%, -50%);
  animation: moveBack 4s ease infinite;
}

.canvas {
  width: 40%;
  height: 170px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@keyframes moveBack {
  100% {
    transform: translate(-150%, -50%);
  }
}

#tfront {
  animation: frontwheelanim 1s ease infinite;
}

#tback {
  animation: backwheelanim 1s ease 0.2s infinite;
}

@keyframes frontwheelanim {
  80% {
    transform: matrix(4.0764314, 0, 0, 4.0764314, -254.34846, -309.01206);
  }
}

@keyframes backwheelanim {
  80% {
    transform: matrix(4.0764314, 0, 0, 4.0764314, -278.31911, -308.68738);
  }
}


@media screen and (max-width: 600px) {
  body {
    background:#000000;
  }
}

@media screen and (min-width: 1620px) {
  .canvas {
    width: 500px;
  }
  .road-object {
    width: 500px;
  }
}
</style>

 


</head>

<body  >
  <!-- Added SVG for base images  -->

<div class="bg-obj">
  <div class="canvas">
    <div class="buildings">

      <svg width="793.70081" height="205" viewBox="0 0 210 54.239584" version="1.1" id="svg48026">

        <defs id="defs48023" />
        <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
          <g id="g51584" transform="translate(-6.3622202,-243.49951)">
            <g id="g51074">
              <g id="g50732" transform="matrix(1.0952269,0,0,1.3788085,6.791161,-112.4593)">
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50710" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g50720">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50712" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50714" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50716" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50718" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50730" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50722" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50724" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50726" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50728" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50734" width="15.031741" height="31.309727" x="76.849411" y="265.41833" />
                <g id="g50744" transform="translate(47.237556,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50736" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50738" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50740" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50742" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50754" transform="translate(53.587555,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50746" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50748" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50750" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50752" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect49510" width="20.960173" height="49.384216" x="7.0548878" y="247.63676" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect49875" width="4.2942786" height="39.977699" x="9.1840849" y="254.25218" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect49877" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect49879" width="4.2942786" height="39.977699" x="21.248964" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect50607" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect50609" width="11.706035" height="3.1135249" x="11.681956" y="244.52797" />
              <g id="g50708">
                <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50611" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g50685">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50613" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50623" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50625" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50627" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50695" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50687" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50689" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50691" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50693" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect50756" width="20.960173" height="49.384216" x="58.790733" y="247.43228" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect50766" width="11.706035" height="3.1135249" x="63.417801" y="244.32349" />
              <g id="g50790" transform="translate(51.735843,-0.2044895)">
                <g id="g50802" transform="translate(-19.737342,-19.665044)">
                  <g id="g50778">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50770" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50772" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50774" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50776" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                  <g id="g50788" transform="translate(6.3499991)">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50780" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50782" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50784" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50786" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                </g>
              </g>
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect50804" width="4.2942786" height="21.397125" x="63.479851" y="275.43549" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect50.........完整代码请登录后点击上方下载按钮下载查看