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

svg+anime自行车运动动画效果

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