svg汽车动画

下载代码

html

css

分享到微信朋友圈

html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camper van animation</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="car-body">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 545.6 313.5" style="enable-background:new 0 0 545.6 313.5;" xml:space="preserve">
          <g id="surf-board">
            <path id="XMLID_34_" class="st6" d="M418.3,59.4c-14.5-4-106.5-10.5-120.5-10.5s-92.7,0.8-108.5,3c-14.1,2-43.4,4.5-57,7.5H418.3z
              "/>
            <path id="XMLID_21_" class="st6" d="M415.3,60.4c14.5,5,19.5,12.5,19.5,12.5l-165.2-3l-165.2,3c0,0-3.3-2,0-5.5
              c3.3-3.5,10.6-3.1,20.8-6c1.1-0.3,2.6-1,4.3-1H415.3z"/>
            <path id="XMLID_23_" class="st6" d="M360.7,51.6c0,0-0.9-5.2,10.6-17.3s21.6-11.9,21.6-11.9h11.9l6.5,2.2L399.1,42l-3.8,12.6
              L360.7,51.6z"/>
            <rect id="XMLID_22_" x="146.3" y="73" class="st6" width="6.8" height="12"/>
            <rect id="XMLID_24_" x="390.3" y="72.9" class="st6" width="7.5" height="12"/>
          </g>
          <g id="body">
            <g id="XMLID_15_">
              <path id="XMLID_29_" class="st7" d="M213.4,161.9l0-67.7c-73.1,0.3-134.6,1.1-136.6,2.7c-5,4-28.1,49.6-28.1,58.1
                c0,2,0,4.6,0,7.4L213.4,161.9z"/>
              <path id="XMLID_27_" class="st8" d="M213.4,161.2l0.4,76.3h-29.5l-16.5-30h-42.5l-18.5,30h-56l-2-54.9c0,0,0-11.8,0-21.1
                L213.4,161.2z"/>
              <polygon id="XMLID_31_" class="st9" points="205.8,160.4 205.8,196.4 116.1,197.6 107.8,215.4 86.3,215.4 85.9,160.4       "/>
              <polyline id="XMLID_14_" class="st10" points="86.9,161.4 87.3,150.4 106.8,98.7 206.8,97.9 206.8,161.4       "/>
              <path id="XMLID_86_" class="st7" d="M97.1,240.3H48.6c-4.3,0-7.7-3.5-7.7-7.8v0c0-4.3,3.5-7.7,7.7-7.7h48.5
                c4.3,0,7.7,3.5,7.7,7.7v0C104.8,236.8,101.3,240.3,97.1,240.3z"/>
              <path id="XMLID_87_" class="st11" d="M118.6,106.4l-3.6-0.1l-3.6,2.1l-10.1,30.1c0,0-0.8,4.4,0,6.8s6.5,3,6.5,3s93.2,0,95,0
                s2-2.9,2-4.3c0-1.4,0-36.4,0-36.4l-0.4-1.6l-1.1,0.3H118.6z"/>
              <path id="XMLID_5_" class="st11" d="M76.8,103.7c0,0,9,2.2,11.5,3.3s2.5,4,2.5,4s-12.8,29.8-14,32.2s-7,5.3-7,5.3h-17l-2-1
                c0,0,3.1-10.8,8.8-23.1c4.7-10.1,11.1-19.4,12.2-19.9C74.3,103.3,76.8,103.7,76.8,103.7z"/>
              <path id="XMLID_16_" class="st5" d="M201.3,176.2h-12c-0.8,0-1.5-0.7-1.5-1.5v-1.1c0-0.8,0.7-1.5,1.5-1.5h12
                c0.8,0,1.5,0.7,1.5,1.5v1.1C202.8,175.6,202.1,176.2,201.3,176.2z"/>
              <rect id="XMLID_4_" x="85.8" y="155.9" class="st12" width="122.5" height="5.5"/>
              <rect id="XMLID_13_" x="48.8" y="155.9" class="st12" width="37.1" height="5.5"/>
            </g>
            <g id="XMLID_39_">
              <path id="XMLID_20_" class="st7" d="M271.8,161.4l205-1c0,0,0-16.6,0-19.4c0-10.6-9.1-42.6-14.1-46.1c-3-2.1-139.9-3.1-250.9-2.7
                v54.2l0.6,15H271.8z"/>
              <polygon id="XMLID_25_" class="st8" points="476.8,159.3 476.8,237.4 447.3,237.4 437.8,222.4 376.3,222.4 366.8,237.4
                212.8,237.4 212.1,159.9       "/>
              <path id="XMLID_3_" class="st7" d="M480.1,239.4h-17c-4.3,0-7.8-3.5-7.8-7.8v0c0-4.3,3.5-7.7,7.8-7.7h17c4.3,0,7.8,3.5,7.8,7.7v0
                C487.8,235.9,484.3,239.4,480.1,239.4z"/>
              <path id="XMLID_85_" class="st11" d="M260.8,147.4h-29c-6.6,0-12-5.4-12-12v-19.5c0-6.6,5.4-12,12-12h29c6.6,0,12,5.4,12,12v19.5
                C272.8,142,267.4,147.4,260.8,147.4z"/>
              <path id="XMLID_88_" class="st11" d="M325.3,147.4h-29c-6.6,0-12-5.4-12-12v-19.5c0-6.6,5.4-12,12-12h29c6.6,0,12,5.4,12,12v19.5
                C337.3,142,331.9,147.4,325.3,147.4z"/>
              <path id="XMLID_89_" class="st11" d="M388.8,146.9h-29c-6.6,0-12-5.4-12-12v-19.5c0-6.6,5.4-12,12-12h29c6.6,0,12,5.4,12,12v19.5
                C400.8,141.5,395.4,146.9,388.8,146.9z"/>
              <line id="XMLID_6_" class="st13" x1="407.8" y1="167.9" x2="447.8" y2="167.9"/>
              <line id="XMLID_8_" class="st13" x1="407.8" y1="173.9" x2="447.8" y2="173.9"/>
              <line id="XMLID_9_" class="st13" x1="407.8" y1="179.9" x2="447.8" y2="179.9"/>
              <line id="XMLID_10_" class="st13" x1="407.8" y1="185.9" x2="447.8" y2="185.9"/>
              <line id="XMLID_12_" class="st13" x1="407.8" y1="191.9" x2="447.8" y2="191.9"/>
              <path id="XMLID_7_" class="st14" d="M471.5,216.1h-10.9c-0.6,0-1.1-0.5-1.1-1.1v-5.8c0-0.6,0.5-1.1,1.1-1.1h10.9
                c0.6,0,1.1,0.5,1.1,1.1v5.8C472.6,215.6,472.1,216.1,471.5,216.1z"/>
              <path id="XMLID_11_" class="st4" d="M477.3,203.9v-8h3.4c0.9,0,1.6,0.7,1.6,1.6v4.9c0,0.9-0.7,1.6-1.6,1.6H477.3z"/>
              <line id="XMLID_18_" class="st15" x1="213.4" y1="97.9" x2="212.8" y2="161.4"/>
              <rect id="XMLID_19_" x="204.8" y="155.9" class="st12" width="272" height="5.5"/>
              <line id="XMLID_28_" class="st16" x1="212.8" y1="161.4" x2="212.8" y2="236.4"/>
            </g>
            <g id="XMLID_26_">
              <path id="XMLID_90_" class="st7" d="M72.3,99.4h395c0,0-6-6.1-8.7-8c-2.8-1.9-8.1-6-13.4-6s-345.1,0-345.1,0l-7.5,0.5
                c0,0-8.7,2.6-11.8,4.4C77.7,92,72.3,99.4,72.3,99.4z"/>
              <line id="XMLID_32_" class="st15" x1="73.8" y1="99.4" x2="465.8" y2="99.4"/>
            </g>
          </g>
        </svg>
      </div>
      <div id="wheel">
        <div class="wheel wheel-front">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 545.6 313.5" style="enable-background:new 0 0 545.6 313.5;" xml:space="preserve">
            <circle id="outer" class="st3" cx="146.3" cy="245.9" r="34"/>
            <path id="white-space" class="st4" d="M146.6,230.5c8.7,0,15.7,7,15.7,15.7s-7,15.7-15.7,15.7s-15.7-7-15.7-15.7
              S137.9,230.5,146.6,230.5"/>
            <path id="inner" class="st5 inner-tire" d="M146.8,239c-4.1,0-7.3,3.2-7.3,7.2c0,4,3.3,7.2,7.3,7.2c0-2.3,0-4.7,0-7c2.8,0,4.7,0,7.3,0
              c0-0.1,0-0.2,0-0.2C154.1,242.2,150.9,239,146.8,239z">
                <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 146.3 245.9" to="0 146.3 245.9" begin="0s" dur="0.6s" repeatCount="indefinite"/>
            </path>
          </svg>
        </div> 
        <div class="wheel wheel-back">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 545.6 313.5" style="enable-background:new 0 0 545.6 313.5;" xml:space="preserve">
            <circle id="outer_1_" class="st3" cx="408.3" cy="245.9" r="34"/>
            <circle id="white-space_1_" class="st4" cx="408.6" cy="246.2" r="15.7"/>
            <path id="inner_1_" class="st5 inner-tire" d="M408.8,239c-4.1,0-7.3,3.2-7.3,7.2c0,4,3.3,7.2,7.3,7.2c0-2.3,0-4.7,0-7c2.8,0,4.7,0,7.3,0
              c0-0.1,0-0.2,0-0.2C416.1,242.2,412.9,239,408.8,239z">
              <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 408.3 245.9" to="0 408.3 245.9" begin="0s" dur="0.6s" repeatCount="indefinite"/>
            </path>
          </svg>
        </div> 
      </div> 
      <div id="smoke">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 93.1 79.3" style="enable-background:new 0 0 93.1 79.3;" xml:space="preserve">
          <path class="st5" d="M36.7,11c-1.8-8-7-10-7-10l-19-1c-17.8,8-8,29-8,29c5.5,5.5,17,7,17,7c-12.7,14.8-7,26-7,26c4,3.8,17,2,17,2v6
            c3.5,12,25,9,25,9c4.5-2,6-5,6-5l1-3h18c7.3-2.8,6-9,6-9l-1-9c11.3-7.8,8-25,8-25c-7.1-4-13.6-4.1-15.5-4c7-9-0.5,0-0.5,0l1-10
            c-9-6-16-8-16-8c-4.3-1.8-19-1-19-1L36.7,11z"/>
        </svg>
      </div> 
      <div id="shadow">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 545.6 313.5" style="enable-background:new 0 0 545.6 313.5;" xml:space="preserve">
          <path class="st2" d="M461.1,288.4H70.3c-5.8,0-10.5-4.7-10.5-10.5l0,0c0-5.8,4.7-10.5,10.5-10.5h390.8
      c5.8,0,10.5,4.7,10.5,10.5l0,0C471.6,283.7,466.8,288.4,461.1,288.4z"/>
        </svg>
      </div> 
    </div>
  </body>
</html>

css

.st1 {
  display: inline;
  fill: #3ABC98;
}

.st2 {
  opacity: 0.32;
  fill: #727171;
}

.st3 {
  fill: #898989;
}

.st4 {
  fill: #FFFFFF;
}

.st5 {
  fill: #C9CACA;
}

.st6 {
  fill: #FDBE25;
}

.st7 {
  fill: #F9F8DE;
}

.st8 {
  fill: #F57D41;
}

.st9 {
  fill: #F57D41;
  stroke: #EA5514;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st10 {
  fill: none;
  stroke: #DEDCC9;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st11 {
  fill: #BDE6E3;
}

.st12 {
  fill: #EA5514;
}

.st13 {
  fill: none;
  stroke: #595757;
  stroke-width: 3;
  stroke-miterlimit: 10;
}

.st14 {
  fill: none;
  stroke: #EA5514;
  stroke-miterlimit: 10;
}

.st15 {
  fill: #DEDCC9;
  stroke: #DEDCC9;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st16 {
  fill: #C96031;
  stroke: #EA5514;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

body {
  background-color: #3ABC98;
}

#wrapper {
  position: absolute;
  width: 620px;
  height: 300px;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

#car-body {
  position: absolute;
  width: 100%;
  bottom: 30px;
  animation: carbody 1s linear infinite;
  -webkit-animation: carbody 1s linear infinite;
}

#wheel .wheel {
  position: absolute;
  width: 100%;
  bottom: 30px;
}
#wheel .wheel-back {
  z-index: -1;
}

#smoke {
  width: 10px;
  position: absolute;
  right: 30px;
  top: 150px;
  animation: smoke 1.2s linear infinite;
  -webkit-animation: smoke 1s linear infinite;
}

#shadow {
  position: absolute;
  bottom: 30px;
  width: 100%;
  z-index: -2;
}

/***** Animation *****/
@keyframes carbody {
  0% {
    bottom: 30px;
  }
  60% {
    bottom: 35px;
  }
  80% {
    bottom: 37px;
  }
}
@-webkit-keyframes carbody {
  0% {
    bottom: 30px;
  }
  60% {
    bottom: 35px;
  }
  80% {
    bottom: 37px;
  }
}
@keyframes smoke {
  from {
    right: 30px;
  }
  to {
    right: -80px;
    transform: scale(5);
    opacity: 0.2;
  }
}
@-webkit-keyframes smoke {
  from {
    right: 30px;
  }
  to {
    right: -80px;
    transform: scale(5);
    opacity: 0.2;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg