svg+css实现一个公交车行驶动画效果代码-html代码-BFW代码库

svg+css实现一个公交车行驶动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现一个公交车行驶动画效果代码

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    @charset "utf-8";
.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;
  }
}
</style>

</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.........完整代码请登录后点击上方下载按钮下载查看