svg+anime自行车运动动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+anime自行车运动动画效果

代码标签：效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body
{
 background-color: #606468;
}
#tyre1, #tyre2
{
   transform-box: fill-box;
    transform-origin: center;
}

 #padel
{
   transform-box: fill-box;
    transform-origin: 91% 49%;
}
</style>

</head>
<body translate="no">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 mx-auto">
<svg version="1.1" id="cycle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#606468;}
	.st1{fill:#EEF2F4;}
	.st2{fill:#525456;}
	.st3{fill:#A9A8A9;}
	.st4{fill:#23D497;}
	.st5{fill:#191919;}
	.st6{fill:none;stroke:#151515;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st7{fill:#242424;}
	.st8{fill:#1A1A1A;}
	.st9{opacity:0.46;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st10{opacity:0.92;fill:#191919;}
	.st11{fill:#25BA81;}
	.st12{fill:none;stroke:#151515;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st13{fill:#31FE9F;}
	.st14{opacity:0.83;}
	.st15{fill:#86FCBE;}
	.st16{fill:#151515;}
	.st17{opacity:0.95;fill:#23D497;}
	.st18{fill:#1FCC8A;}
	.st19{fill:#161616;}
	.st20{fill:none;stroke:#151515;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st21{opacity:0.46;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st22{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st23{fill:#5E5E5E;}
	.st24{fill:none;stroke:#151515;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st25{opacity:0.5;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st26{fill:#B7B7B7;}
	.st27{opacity:0.67;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<rect id="XMLID_62_" class="st0" width="1000" height="1000" />
<g>
<ellipse id="XMLID_2_" class="st2" cx="262.2" cy="775.5" rx="121.5" ry="11.4" />
<ellipse id="XMLID_4_" class="st2" cx="803.4" cy="783.9" rx="121.5" ry="11.4" />
<g id="XMLID_90_">
<g id="XMLID_319_">
<path id="XMLID_322_" class="st3" d="M316.1,510.9l-23.6-11c-1.5-0.7-2.2-2.5-1.5-4v0c0.7-1.5,2.5-2.2,4-1.5l23.6,11
				c1.5,0.7,2.2,2.5,1.5,4l0,0C319.4,510.9,317.6,511.6,316.1,510.9z" />
<path id="XMLID_321_" class="st3" d="M318.7,505.4l-23.6-11c-1.5-0.7-2.2-2.5-1.5-4l0,0c0.7-1.5,2.5-2.2,4-1.5l23.6,11
				c1.5,0.7,2.2,2.5,1.5,4v0C322,505.5,320.2,506.1,318.7,505.4z" />
<path id="XMLID_320_" class="st3" d="M321.2,500l-23.6-11c-1.5-0.7-2.2-2.5-1.5-4l0,0c0.7-1.5,2.5-2.2,4-1.5l23.6,11
				c1.5,0.7,2.2,2.5,1.5,4l0,0C324.5,500.1,322.7,500.7,321.2,500z" />
</g>
</g>
<path id="XMLID_55_" class="st4" d="M589.3,495.7l10.3,20.2c3.1,6.1-1.5,13.3-8.4,12.9l-19.3-1L589.3,495.7z" />
<rect id="XMLID_186_" x="627.4" y="594.8" transform="matrix(0.866 -0.5 0.5 0.866 -215.5766 399.8123)" class="st5" width="21.8" height="14.8" />
<rect id="XMLID_54_" x="627.4" y="594.8" transform="matrix(0.866 -0.5 0.5 0.866 -215.5766 399.8123)" class="st6" width="21.8" height="14.8" />
<path id="XMLID_52_" class="st6" d="M589.3,495.7l10.3,20.2c3.1,6.1-1.5,13.3-8.4,12.9l-19.3-1L589.3,495.7z" />
<polygon id="sitroad" class="st7" points="568.1,484.8 686.4,332.7 705.1,335.9 586.9,501.6 	" />
<polygon id="XMLID_264_" class="st8" points="696.6,334.4 581,496.3 586.9,501.6 705.1,335.9 	" />
<polygon id="XMLID_188_" class="st8" points="678.1,343.3 692.5,350.8 697,340.2 690.3,334.4 	" />
<polygon id="XMLID_41_" class="st6" points="568.1,484.8 686.4,332.7 705.1,335.9 586.9,501.6 	" />
<path id="XMLID_63_" class="st5" d="M760.2,308.5l-1,0.2c-21.6,3.9-43.5,4.7-65.3,2.5l-35.1-2c-6.6-0.4-13,2.6-17.3,8.1l-8.2,10.7
		c-1.1,1.5-0.4,3.7,1.3,4.1c0,0,41.5,0.5,78.4,17.5c3.5,1.6,7.5,1.7,11-0.2c12.7-6.8,42-22.8,42-22.8c3.6-2,5.6-6.4,4.6-10.9
		C769.5,310.7,764.9,307.6,760.2,308.5z" />
<path id="XMLID_334_" class="st7" d="M634.6,332c0,0,0.6,0,1.7,0l5.3-6.8c4.3-5.5,10.6-8.5,17.3-8.1l39.9,6.8
		c21.8,2.3,35.7,0.5,60.4-7.3l1-0.2c4.1-0.7,8.2,1.5,9.9,5.5c0.8-1.9,1-4.1,0.5-6.3c-1.1-5-5.7-8-10.4-7.2l-1,0.2
		c-21.6,3.9-43.5,4.7-65.3,2.5l-35.1-2c-6.6-0.4-13,2.6-17.3,8.1l-8.2,10.7C632.2,329.4,632.9,331.6,634.6,332z" />
<path id="XMLID_47_" class="st6" d="M760.2,308.5l-1,0.2c-21.6,3.9-43.5,4.7-65.3,2.5l-35.1-2c-6.6-0.4-13,2.6-17.3,8.1l-8.2,10.7
		c-1.1,1.5-0.4,3.7,1.3,4.1c0,0,41.5,0.5,78.4,17.5c3.5,1.6,7.5,1.7,11-0.2c12.7-6.8,42-22.8,42-22.8c3.6-2,5.6-6.4,4.6-10.9
		C769.5,310.7,764.9,307.6,76.........完整代码请登录后点击上方下载按钮下载查看