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-100.8-58.7l-1.2,2.6l112.6,65.6c3.2,2.1,6.2,4.4,9.1,6.7 C449.2,544.5,442.7,539.1,435.5,534.3z" /> </g> </g> </g> <g id="XMLID_271_" class="st14"> <g id="XMLID_381_"> <g id="XMLID_384_"> <path id="XMLID_385_" class="st15" d="M501.9,623.9c2.1,8.9,3.4,18,3.7,27.3l0.2,3.3c0.4,6.2,2.9,11.8,6.7,16.2 C511.5,654.4,507.8,638.7,501.9,623.9z" /> </g> <g id="XMLID_382_"> <path id="XMLID_383_" class="st15" d="M498.6,511.5c20.3,11.2,45.7,4.3,61.3-12.9l18-21.9l-5-4.1l-20.8,21 c-14.2,15.7-40.9,18.6-59.4,8.4l-140.1-62.9l-2.8,5.6L498.6,511.5z" /> </g> </g> </g> <polygon id="XMLID_182_" class="st4" points="345.8,480.8 363.5,444 348.7,437.5 330.3,474.8 " /> <path id="XMLID_45_" class="st6" 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" /> <path id="XMLID_33_" class="st7" d="M380.5,348l25.3-143.5l-22.9-4l-27.4,155.6l-0.7,3.9c-0.8,4.6,1.2,9.1,4.8,10.7l16.5,7.3 c3.8,1.7,7.8-2.8,6.7-7.4C381,363.3,379.4,354.4,380.5,348z" /> <path id="XMLID_203_" class="st8" d="M380.5,348l25.3-143.5l-22.9-4l-0.8,4.7l14.3,2.5L371,351.1c-1.1,6.4,0.4,15.3,2.2,22.5 c0.3,1,0.2,2.1,0,3l2.8,1.2c3.8,1.7,7.8-2.8,6.7-7.4C381,363.3,379.4,354.4,380.5,348z" /> <path id="XMLID_48_" class="st6" d="M380.5,348l25.3-143.5l-22.9-4l-27.4,155.6l-0.7,3.9c-0.8,4.6,1.2,9.1,4.8,10.7l16.5,7.3 c3.8,1.7,7.8-2.8,6.7-7.4C381,363.3,379.4,354.4,380.5,348z" /> <path id="XMLID_39_" class="st7" d="M370.9,395.3l-22.3-9c-4.6-1.9-6.8-7.1-5-11.7l0,0c1.9-4.6,7.1-6.8,11.7-5l22.3,9 c4.6,1.9,6.8,7.1,5,11.7l0,0C380.8,394.9,375.5,397.1,370.9,395.3z" /> <path id="XMLID_206_" class="st8" d="M377.7,378.6l-7.8-3.2c2.4,2.5,3.3,6.3,1.9,9.7c-1.9,4.6-7.1,6.8-11.7,5l-14.4-5.8 c0.8,0.8,1.9,1.5,3,2l22.3,9c4.6,1.9,9.9-0.4,11.7-5C384.5,385.7,382.3,380.4,377.7,378.6z" /> <path id="XMLID_42_" class="st6" d="M370.9,395.3l-22.3-9c-4.6-1.9-6.8-7.1-5-11.7l0,0c1.9-4.6,7.1-6.8,11.7-5l22.3,9 c4.6,1.9,6.8,7.1,5,11.7l0,0C380.8,394.9,375.5,397.1,370.9,395.3z" /> <ellipse id="XMLID_228_" transform="matrix(0.883 -0.4694 0.4694 0.883 -52.2232 209.4556)" class="st16" cx="394" cy="209.5" rx="12.8" ry="17" /> <ellipse id="XMLID_44_" transform="matrix(0.883 -0.4694 0.4694 0.883 -51.9329 209.3833)" class="st6" cx="394" cy="208.9" rx="12.8" ry="17" /> <path id="XMLID_51_" class="st13" d="M624.2,549.6c-2-3.2-4.3-6.2-7-8.8c-5.2-5.1-10.3-10.2-15.4-15.3l0.1,0l-3.9-6.7 c-1.9-3.3-6.1-4.4-9.3-2.5c-3.3,1.9-4.4,6.1-2.5,9.3l3.9,6.7l0.1,0c1.9,7,3.7,14,5.6,21c0.9,3.6,2.3,7.2,4.2,10.5 c8.6,15.7,7.3,12.6,18.6,29.5l22.1-12.7C631.4,562.3,633.5,565,624.2,549.6z" /> <path id="XMLID_325_" class="st17" d="M592.1,522.6l3.9,6.7l-0.1,0c5.1,5.1,10.2,10.2,15.4,15.3c2.7,2.6,5,5.6,7,8.8 c9.2,15.2,7.3,12.7,16.1,30.5l6-3.5c-9-18.2-7-15.5-16.3-30.8c-2-3.2-4.3-6.2-7-8.8c-5.2-5.1-10.3-10.2-15.4-15.3l0.1,0l-3.9-6.7 c-1.9-3.3-6.1-4.4-9.3-2.5c-1.2,0.7-2.2,1.7-2.7,2.9C588.4,519.1,590.8,520.3,592.1,522.6z" /> <path id="XMLID_117_" class="st6" d="M624.2,549.6c-2-3.2-4.3-6.2-7-8.8c-5.2-5.1-10.3-10.2-15.4-15.3l0.1,0l-3.9-6.7 c-1.9-3.3-6.1-4.4-9.3-2.5c-3.3,1.9-4.4,6.1-2.5,9.3l3.9,6.7l0.1,0c1.9,7,3.7,14,5.6,21c0.9,3.6,2.3,7.2,4.2,10.5 c8.6,15.7,7.3,12.6,18.6,29.5l22.1-12.7C631.4,562.3,633.5,565,624.2,549.6z" /> <path id="XMLID_181_" class="st18" d="M646,593.9c-5.6,4.6-11.9,8.3-18.7,10.8c-3.2,1-7.3-0.7-8.9-3.4l0,0c-1.6-2.7-1-7.1,1.5-9.4 c5.6-4.6,11.9-8.3,18.7-10.8c3.2-1,7.3,0.7,8.9,3.4l0,0C649,587.2,648.5,591.6,646,593.9z" /> <path id="XMLID_53_" class="st6" d="M646,593.9c-5.6,4.6-11.9,8.3-18.7,10.8c-3.2,1-7.3-0.7-8.9-3.4l0,0c-1.6-2.7-1-7.1,1.5-9.4 c5.6-4.6,11.9-8.3,18.7-10.8c3.2-1,7.3,0.7,8.9,3.4l0,0C649,587.2,648.5,591.6,646,593.9z" /> <path id="XMLID_126_" class="st5" d="M638.2,622.5c-0.3,1.2-0.5,2.4-0.5,3.7c0,7.8,6.3,14.1,14.1,14.1c7.7,0,13.9-6.1,14.1-13.8 L638.2,622.5z" /> <path id="XMLID_61_" class="st6" d="M638.2,622.5c-0.3,1.2-0.5,2.4-0.5,3.7c0,7.8,6.3,14.1,14.1,14.1c7.7,0,13.9-6.1,14.1-13.8 L638.2,622.5z" /> <circle id="XMLID_57_" class="st7" cx="533.1" cy="651.5" r="28.9" /> <circle id="XMLID_58_" class="st6" cx="533.1" cy="651.5" r="28.9" /> <circle id="XMLID_279_" class="st6" cx="533.1" cy="651.5" r="28.9" /> <circle id="XMLID_83_" class="st10" cx="533.1" cy="651.5" r="17" /> <path id="XMLID_127_" class="st5" d="M655.5,631.3L655.5,631.3c-3,1.8-6.9,0.7-8.7-2.3l-10-17.4l11-6.4l10,17.4 C659.5,625.7,658.5,629.6,655.5,631.3z" /> <path id="XMLID_56_" class="st6" d="M655.5,631.3L655.5,631.3c-3,1.8-6.9,0.7-8.7-2.3l-10-17.4l11-6.4l10,17.4 C659.5,625.7,658.5,629.6,655.5,6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0