<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡通公交车CSS3动画特效 - 站长素材</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</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><!-- Car Body -->
<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> <!-- Wheel Front -->
<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> <!-- Wheel Back -->
</div> <!-- Wheel -->
<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> <!-- Smoke -->
<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"/>
<
