css3+SVG画UI自行车

1、新建html文档。

3、初始化css代码。<style>g { transform-box: fill-box; }g * { transform-box: border-box; }#bikechain { stroke-dasharray: 5 2; stroke-dashoffset: 300; animation: moveChain 4s linear infinite; }@keyframes moveChain { to { stroke-dashoffset: 0;}}#crank { transform-origin: 50% 50% 0; }#left-arm { transform-origin: 50% 97% 0; }#right-arm { transform-origin: 50% 0% 0; }#left-arm, #right-arm, #crank { -webkit-animation: rotate 4s linear infinite; -moz-animation: rotate 4s linear infinite; animation: rotate 4s linear infinite; }#rear_wheel, #front_wheel { transform-origin: center; -webkit-animation: rotate 3s linear infinite; -moz-animation: rotate 3s linear infinite; animation: rotate 3s linear infinite; }@-webkit-keyframes rotate { from {-webkit-transform: rotate(0deg);}to { -webkit-transform: rotate(360deg); }}@-moz-keyframes rotate { from {-moz-transform: rotate(0deg);}to { -moz-transform: rotate(360deg); }}@keyframes rotate { from {transform: rotate(0deg);}to { transform: rotate(360deg); }}#bike { display: flex; }#Layer_1 { margin-left: auto; margin-right: auto; width: 600px; height: 600px; }</style>

5、代码整体结构。