TweenMax+svg实现赛手路上骑自行车动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现赛手路上骑自行车动画效果代码
代码标签： TweenMax svg 赛手 路上 骑 自行车 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
#Layer_1 {
height: 100%;
width: 100%;
}
body {
background-color: #FFF;
overflow: hidden;
text-align: center;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
display: inline-block;
}
text {
font-family: 'Comfortaa', cursive;
}
</style>
</head>
<body >
<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"
width="630.5px" height="500.5px" viewBox="0 0 630.5 500.5" enable-background="new 0 0 630.5 500.5" xml:space="preserve">
<g id="bicycle">
<g id="innerLeg">
<g id="lowerLeftG">
<g>
<path fill="#FFEA71" d="M303.084,363l-4.104,7.576c-1.478,5.322,1.639,10.833,6.96,12.313l5.783,1.603
c5.32,1.478,2.398-3.021,3.877-8.343l5.173-17.773L304.5,352.75L303.084,363z"/>
<path fill="#DEA47F" d="M340.064,294.061l-5.78-1.604c-5.323-1.479-10.834,1.641-12.313,6.962l-0.791,11.34l-7.466,8.571
l-6.646,10.65l-1,12.459L304.5,352.75l16.273,5.625l26.25-52.007C348.503,301.048,345.383,295.538,340.064,294.061z"/>
</g>
<g id="innerShoe">
<path fill="#00BCD4" d="M335.807,400.416c5.683-0.697,10.922-3.982,13.504-7.086c-0.44-0.454-1-0.809-1.694-0.986
c-1.399-0.359-2.839-0.646-4.274-0.783c-3.164-0.322-19.611-14.983-19.85-15.577c-0.189-0.486-4.571-2.977-6.5-2.094
c-1.774,0.813-3.523,1.715-5.392,2.26c-1.854,0.541-3.703,0.834-5.578,0.363c-1.697-0.434-2.974-1.461-3.92-2.986
c-0.701-1.127-2.724-5.788-3.708-5.271c-1.904,0.989-3.603,2.248-4.752,4.221c-1.463,2.506-2.415,5.217-2.931,8.088
c-0.234,1.312-0.325,2.67-0.766,3.901c-0.396,1.105-0.847,2.2-1.074,3.354c-0.001,0.004-0.001,0.007-0.002,0.011
c3.757,1.879,12.737,6.045,19.548,6.646C317.25,395.251,329.029,401.25,335.807,400.416z"/>
<path fill="#FFEA71" d="M349.311,393.33c-2.582,3.104-7.822,6.389-13.504,7.086c-6.775,0.834-18.557-5.165-27.39-5.943
c-6.812-0.602-15.792-4.768-19.548-6.646c-0.354,1.781-0.334,3.523,0.565,5.114c0.727,1.283,1.919,1.863,3.146,2.339
c4.776,1.854,9.698,3.147,14.819,3.62c0.711,0.066,18.244,5.122,18.946,5.292c1.794,0.441,8.7,1.438,9.175,1.418
c4.521-0.178,8.664-1.674,12.41-4.564c0.615-0.479,1.155-1.054,1.646-1.683C350.868,397.705,350.816,394.889,349.311,393.33z"/>
</g>
</g>
<g id="upperLeft">
<path fill="#010101" d="M305.137,218.283c-1.586-5.296-7.157-8.299-12.448-6.716l-5.749,1.729
c-5.291,1.584-8.294,7.158-6.711,12.449l33.485,69.519l28.679-14.091L305.137,218.283z"/>
<path fill="#DEA47F" d="M348.239,299.54l-5.847-18.367l-28.68,14.091l7.467,15.498c1.586,5.29,7.156,8.295,12.448,6.711
l5.748-1.728C344.665,314.159,349.053,306.469,348.239,299.54z"/>
</g>
</g>
<g id="roadMarks">
<path fill="#00A2DB" d="M625.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C625.043,426.531,625.584,427.202,625.584,428.031L625.584,428.031z"/>
<path fill="#00A2DB" d="M585.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C585.043,426.531,585.584,427.202,585.584,428.031L585.584,428.031z"/>
<path fill="#00A2DB" d="M545.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C545.043,426.531,545.584,427.202,545.584,428.031L545.584,428.031z"/>
<path fill="#00A2DB" d="M505.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C505.043,426.531,505.584,427.202,505.584,428.031L505.584,428.031z"/>
<path fill="#00A2DB" d="M465.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C465.043,426.531,465.584,427.202,465.584,428.031L465.584,428.031z"/>
<path fill="#00A2DB" d="M425.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C425.043,426.531,425.584,427.202,425.584,428.031L425.584,428.031z"/>
<path fill="#00A2DB" d="M385.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C385.043,426.531,385.584,427.202,385.584,428.031L385.584,428.031z"/>
<path fill="#00A2DB" d="M345.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
c0-0.828,0.541-1.5,1.209-1.5h17.582C345.043,426.531,345.584,427.202,345.584,428.031L345.584,428.031z"/>
<path fill="#00A2DB" d="M305.584,428.031c0,0.828-0.542,1.5-1.208,1.5h-17.583c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C305.042,426.531,305.584,427.202,305.584,428.031L305.584,428.031z"/>
<path fill="#00A2DB" d="M265.584,428.031c0,0.828-0.542,1.5-1.208,1.5h-17.583c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C265.042,426.531,265.584,427.202,265.584,428.031L265.584,428.031z"/>
<path fill="#00A2DB" d="M225.584,428.031c0,0.828-0.542,1.5-1.208,1.5h-17.583c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C225.042,426.531,225.584,427.202,225.584,428.031L225.584,428.031z"/>
<path fill="#00A2DB" d="M185.584,428.031c0,0.828-0.542,1.5-1.208,1.5h-17.583c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C185.042,426.531,185.584,427.202,185.584,428.031L185.584,428.031z"/>
<path fill="#00A2DB" d="M145.584,428.031c0,0.828-0.542,1.5-1.208,1.5h-17.583c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C145.042,426.531,145.584,427.202,145.584,428.031L145.584,428.031z"/>
<path fill="#00A2DB" d="M105.584,428.031c0,0.828-0.542,1.5-1.208,1.5H86.792c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C105.042,426.531,105.584,427.202,105.584,428.031L105.584,428.031z"/>
<path fill="#00A2DB" d="M65.584,428.031c0,0.828-0.542,1.5-1.208,1.5H46.792c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C65.042,426.531,65.584,427.202,65.584,428.031L65.584,428.031z"/>
<path fill="#00A2DB" d="M25.584,428.031c0,0.828-0.542,1.5-1.208,1.5H6.792c-0.667,0-1.208-0.672-1.208-1.5l0,0
c0-0.828,0.542-1.5,1.208-1.5h17.583C25.042,426.531,25.584,427.202,25.584,428.031L25.584,428.031z"/>
</g>
<g id="wheels_1_" enable-background="new ">
<g id="frontWheel">
<circle fill="#F25772" cx="422.49" cy="365.066" r="10.614"/>
<path fill="#FFEA71" d="M422.49,335.136c16.526,0,29.931,13.397,29.931,29.931s-13.396,29.931-29.931,29.931
c0,0-2.18,0.44-2.18,2.19s2.18,2.537,2.18,2.537c19.144,0,34.656-15.521,34.656-34.658c0-19.14-15.518-34.657-34.656-34.657
c0,0-1.907,1.013-1.907,2.43S422.49,335.136,422.49,335.136z"/>
<path fill="#F25772" d="M422.49,309.136c-30.891,0-55.932,25.04-55.932,55.931s25.041,55.931,55.932,55.931
c30.892,0,55.933-25.04,55.933-55.931S453.381,309.136,422.49,309.136z M422.49,411.189c-25.475,0-46.124-20.649-46.124-46.123
c0-25.476,20.649-46.125,46.124-46.125c25.476,0,46.124,20.649,46.124,46.125C468.615,390.538,447.965,411.189,422.49,411.189z"
/>
<path fill="#5E5E5E" d="M422.49,304.275c-33.574,0-60.792,27.217-60.792,60.791s27.218,60.791,60.792,60.791
s60.792-27.217,60.792-60.791S456.065,304.275,422.49,304.275z M422.49,420.992c-30.891,0-55.932-25.04-55.932-55.93
c0-30.892,25.041-55.932,55.932-55.932c30.892,0,55.933,25.04,55.933,55.932C478.422,395.952,453.381,420.992,422.49,420.992z"/>
<path fill="none" stroke="#F7EA06" stroke-miterlimit="10" d="M364.46,365.352c0,32.318,26.197,58.519,58.519,58.519"/>
<path fill="none" stroke="#EFEFEF" stroke-width="2" stroke-miterlimit="10" d="M422.49,309.136
c-30.891,0-55.932,25.04-55.932,55.931s25.041,55.931,55.932,55.931c30.892,0,55.933-25.04,55.933-55.931
S453.381,309.136,422.49,309.136z"/>
<path display="none" fill="#5E5E5E" d="M422.49,309.136c-30.891,0-55.932,25.04-55.932,55.931s25.041,55.931,55.932,55.931
c30.892,0,55.933-25.04,55.933-55.931S453.381,309.136,422.49,309.136z M422.49,411.189c-25.475,0-46.124-20.649-46.124-46.123
c0-25.476,20.649-46.125,46.124-46.125c25.476,0,46.124,20.649,46.124,46.125C468.615,390.538,447.965,411.189,422.49,411.189z"
/>
</g>
<g id="backWheel">
<circle fill="#F25772" cx="233.178" cy="365.066" r="10.615"/>
<path fill="#F25772" d="M254.342,343.902c11.688,11.688,11.687,30.64-0.001,42.326c-11.688,11.688-30.638,11.688-42.326,0
c0,0-1.854-1.229-3.091,0.01c-1.237,1.239-0.252,3.335-0.252,3.335c13.535,13.534,35.479,13.534,49.014,0s13.535-35.479,0-49.015
c0,0-2.063-0.636-3.063,0.366S254.342,343.902,254.342,343.902z"/>
<path fill="#FFEA71" d="M272.727,325.518c-21.842-21.843-57.255-21.844-79.097,0c-21.842,21.842-21.842,57.254,0,79.098
c21.842,21.845,57.255,21.846,79.097,0.001C294.569,382.774,294.569,347.359,272.727,325.518z M200.563,397.68
c-18.012-18.016-18.012-47.216,0-65.229c18.015-18.014,47.217-18.014,65.229,0c18.012,18.016,18.013,47.216,0,65.229
C247.779,415.693,218.576,415.693,200.563,397.68z"/>
<path fill="#5E5E5E" d="M276.164,322.077c-23.741-23.738-62.232-23.738-85.974-0.001c-23.739,23.74-23.738,62.23,0,85.975
c23.741,23.738,62.232,23.738,85.974,0.001C299.905,384.313,299.904,345.82,276.164,322.077z M193.63,404.614
c-21.842-21.843-21.843-57.255,0-79.097c21.842-21.845,57.255-21.844,79.097,0c21.842,21.842,21.843,57.256,0,79.098
C250.885,426.454,215.472,426.453,193.63,404.614z"/>
<path fill="none" stroke="#F7EA06" stroke-miterlimit="10" d="M191.941,324.234c-22.853,22.854-22.852,59.902,0.001,82.756"/>
<path fill="none" stroke="#EFEFEF" stroke-width="2" stroke-miterlimit="10" d="M272.727,325.518
c-21.842-21.843-57.255-21.844-79.097,0c-21.842,21.842-21.842,57.254,0,79.098c21.842,21.845,57.255,21.846,79.097,0.001
C294.569,382.774,294.569,347.359,272.727,325.518z"/>
</g>
</g>
<g id="cycleBody">
<path fill="#5E5E5E" d="M413.607,290.448v4.917c10.17,0,18.414-8.24,18.414-18.408c0-6.104-2.982-11.496-7.558-14.85
c0.28-0.44,0.449-0.967,0.449-1.526c0-0.678-0.245-1.289-0.638-1.778c1.412-2.037,2.447-4.385,2.949-6.976
c0.346-1.777,0.413-3.541,0.248-5.255c0,0-0.682-1.071-2.224-1.279s-2.887,0.289-2.887,0.289c0.354,1.699,0.384,3.497,0.032,5.309
c-0.52,2.68-1.804,5.016-3.576,6.835h-36.178c-1.576,0-2.854,1.277-2.854,2.854c0,0.731,1.084,5.422-2.79,8.422
c-23.307,7.851-72.617,13.817-88.645,15.616l-12.1-41.035l10.598,0.427c2.767,0.111,5.095-2.04,5.206-4.803
c0.111-2.767-2.039-5.098-4.803-5.206l-36.997-1.489c-2.765-0.111-5.095,2.039-5.206,4.803c-0.111,2.767,2.039,5.098,4.803,5.206
l15.044,0.605l16.796,58.354L234.716,359.1c-0.09-0.004-0.18-0.014-0.271-0.014c-3.129,0-5.666,2.534-5.666,5.665
c0,3.13,2.537,5.665,5.666,5.665c1.483,0,2.83-0.573,3.84-1.509l72.057,10.34c1.32,0.748,2.846,1.185,4.473,1.185
c3.807,0,7.063-2.341,8.421-5.66l70.402-72.424l25.246,63.135c0.73,1.98,2.938,2.994,4.918,2.262
c1.98-0.73,2.995-2.938,2.264-4.917c0,0-38.855-98.784-39.217-99.392h26.76v0.024c7.449,0,13.492,6.041,13.492,13.495
C427.104,284.406,421.061,290.448,413.607,290.448z M240.096,364.434c-0.059-1.057-0.4-2.037-0.959-2.859l45.155-52.688
l18.858,63.954L240.096,364.434z M314.125,362.27c-0.944,0.069-24.359-72.873-24.359-72.873l94.071-10.146
C383.544,282.6,326.559,348.961,314.125,362.27z"/>
<text transform="matrix(0.6807 -0.7326 0.7326 0.6807 329.8809 360.8069)" fill="#FFEA71" font-size="8">TOUR DE FRANCE 2017</text>
</g>
<g id="lowerChains">
<g id="upperChains_1_">
<circle fill="#F25772" cx="237.607" cy="389.448" r="2.129"/>
<circle fill="#F25772" cx="242.556" cy="389.448" r="2.129"/>
<circle fill="#F25772" cx="247.505" cy="389.448" r="2.129"/>
<circle fill=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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