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

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