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,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,760.2,308.5z" />
<g id="firstRoad">
<path id="XMLID_122_" class="st7" d="M316.1,529.2c4.6-10.1-0.4-18-10.4-22.8c0,0-0.1-0.1-0.1-0.1c0,0-2.5-1.1-2.8-1.2
c-10.4-5.1-20.1-1.7-24.9,9c-21.5,47.8-39,97.3-52.2,148c7.1,1.8,14.2,3.7,21.3,5.5c10.4-40,23.5-79.1,39.2-117.3
c2.1-5.1,6.9-8.5,12.2-8.6C306.3,541.7,312.7,536.7,316.1,529.2z" />
<line id="XMLID_179_" class="st9" x1="245.5" y1="617.5" x2="282" y2="521.8" />
<path id="XMLID_187_" class="st9" d="M285.7,515.6c0,0,3-5.7,7.7-5.7" />
<path id="XMLID_257_" class="st10" d="M314.7,513.2c-0.2,1.8-0.7,3.7-1.6,5.7c-3.4,7.5-9.8,12.4-17.6,12.5
c-5.3,0.1-10.2,3.5-12.2,8.6c-15.7,38.1-28.8,77.3-39.2,117.3c-5.3-1.4-10.6-2.8-15.9-4.1c-0.8,3-1.6,5.9-2.4,8.9
c7.1,1.8,14.2,3.7,21.3,5.5c10.4-40,23.5-79.1,39.2-117.3c2.1-5.1,6.9-8.5,12.2-8.6c7.8-0.1,14.2-5,17.6-12.5
C318.9,523,318.1,517.6,314.7,513.2z" />
<path id="XMLID_36_" class="st6" d="M316.1,529.2c4.6-10.1-0.4-18-10.4-22.8c0,0-0.1-0.1-0.1-0.1c0,0-2.5-1.1-2.8-1.2
c-10.4-5.1-20.1-1.7-24.9,9c-21.5,47.8-39,97.3-52.2,148c7.1,1.8,14.2,3.7,21.3,5.5c10.4-40,23.5-79.1,39.2-117.3
c2.1-5.1,6.9-8.5,12.2-8.6C306.3,541.7,312.7,536.7,316.1,529.2z" />
</g>
<path id="XMLID_20_" class="st11" d="M771.8,688.4l-236-0.5c-23-0.5-40.7-20.5-38.4-43.4v0c2.3-22.9,23.7-38.9,46.3-34.8
l232.6,33.8L771.8,688.4z" />
<line id="XMLID_313_" class="st12" x1="550.1" y1="623.9" x2="771" y2="648.8" />
<path id="XMLID_231_" class="st13" d="M562.8,663.2c-23-0.5-40.7-20.5-38.4-43.4v0c0.3-3.3,1.1-6.4,2.1-9.3
c-15.3,4.1-27.4,17.2-29.1,34.1v0c-2.3,22.9,15.4,42.9,38.4,43.4l236,0.5l2.5-24.8L562.8,663.2z" />
<g id="XMLID_348_">
<g id="XMLID_401_">
<g id="XMLID_404_">
<path id="XMLID_405_" class="st4" d="M525.4,614.4c0.3-1.3,0.7-2.6,1.2-3.9c-0.4,0.1-0.9,0.2-1.3,0.4
C525.3,612,525.3,613.2,525.4,614.4z" />
</g>
<g id="XMLID_402_">
<path id="XMLID_403_" class="st4" d="M772.9,675.7l-236-0.5c-20.5-0.4-36.8-16.4-38.4-36.1c-0.4,1.8-0.8,3.6-1,5.5v0
c-2.3,22.9,15.4,42.9,38.4,43.4l236,0.5l2.5-24.8l-0.3,0L772.9,675.7z" />
</g>
</g>
</g>
<path id="XMLID_125_" class="st6" d="M562.8,663.2c-23-0.5-40.7-20.5-38.4-43.4v0c0.3-3.3,1.1-6.4,2.1-9.3
c-15.3,4.1-27.4,17.2-29.1,34.1v0c-2.3,22.9,15.4,42.9,38.4,43.4l236,0.5l2.5-24.8L562.8,663.2z" />
<path id="XMLID_38_" class="st6" d="M771.8,688.4l-236-0.5c-23-0.5-40.7-20.5-38.4-43.4v0c2.3-22.9,23.7-38.9,46.3-34.8l232.6,33.8
L771.8,688.4z" />
<g id="XMLID_34_">
<g id="XMLID_139_">
<path id="XMLID_142_" class="st6" 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_141_" class="st6" 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_140_" class="st6" 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_30_" class="st13" d="M324.4,494.7l-24.6-11.5c-1.7-0.8-2.5-2.8-1.7-4.6l43.6-93.5c0.8-1.7,2.8-2.5,4.6-1.7
l24.6,11.5c1.7,0.8,2.5,2.8,1.7,4.6L329,493.1C328.2,494.8,326.1,495.5,324.4,494.7z" />
<path id="XMLID_281_" class="st4" d="M370.9,395l-24.6-11.5c-0.2-0.1-0.4-0.2-0.7-0.2l14.5,6.8c1.7,0.8,2.5,2.8,1.7,4.6l-43.6,93.5
c-0.7,1.5-2.3,2.3-3.9,1.9l10.1,4.7c1.7,0.8,3.8,0.1,4.6-1.7l43.6-93.5C373.4,397.9,372.6,395.8,370.9,395z" />
<path id="XMLID_40_" class="st6" d="M324.4,494.7l-24.6-11.5c-1.7-0.8-2.5-2.8-1.7-4.6l43.6-93.5c0.8-1.7,2.8-2.5,4.6-1.7
l24.6,11.5c1.7,0.8,2.5,2.8,1.7,4.6L329,493.1C328.2,494.8,326.1,495.5,324.4,494.7z" />
<path id="XMLID_29_" class="st13" d="M557.8,634.5c-1.7-9-2.6-18.3-2.6-27.8c0-55.7,41.4-114.6,41.4-114.6l-23.7-19.4l-20.8,21
c-14.2,15.7-40.9,18.6-59.4,8.4l-140.1-62.9l-19.1,38.9l112.6,65.6c35.9,24.2,58.1,64.2,59.4,107.5l0.2,3.3
c1,15.3,14.4,26.7,29.6,25.4h0c15.7-1.4,26.9-15.7,24.6-31.3L557.8,634.5z" />
<g id="XMLID_296_">
<g id="XMLID_349_">
<g id="XMLID_350_">
<path id="XMLID_351_" class="st4" d="M519.6,653.9l-7.1-3.7c-1.5-48.7,3.7-88.2-56.8-124.2l-116.8-58.8l-5.3,10.9l112.6,65.6
c35.9,24.2,55.8,57.3,59,100.3l2.4,1.7c0.7,11,7.8,20,17.5,23.7C521.9,665,519.9,659.7,519.6,653.9z" />
</g>
</g>
</g>
<g id="XMLID_293_">
<g id="XMLID_359_">
<g id="XMLID_362_">
<path id="XMLID_363_" class="st4" d="M557.8,634.5c-1.7-9-2.6-18.3-2.6-27.8c0-55.7,41.4-114.6,41.4-114.6l-5.3-4.3
c-4,5.9-52,59.3-52,111.9c0,9.5-7.9,25.8-6.2,34.8l16.3,4.6c2.4,15.6-8.9,29.9-24.6,31.3h0c-5.3,0.5-10.3-0.6-14.7-2.8
c5.3,8.1,14.9,13.2,25.2,12.2h0c15.7-1.4,26.9-15.7,24.6-31.3L557.8,634.5z" />
</g>
<g id="XMLID_360_">
<path id="XMLID_361_" class="st4" d="M435.5,534.3l-10.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0