css3+SVG画UI自行车

1、新建html文档。

  <radialgradient id="radial-gradient-4" cx="922.9" cy="544.6" r="15.47" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient"></radialgradient></div>

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>

4、书写css代码。

<style>

.cls-1 {fill: url(#linear-gradient);}

.cls-2 {fill: url(#linear-gradient-2);}

.cls-11, .cls-23, .cls-25, .cls-3, .cls-39, .cls-5, .cls-7, .cls-8 {fill: none;}

.cls-3 {stroke: #ddb18d;stroke-width: 5px;}

.cls-11, .cls-17, .cls-23, .cls-25, .cls-27, .cls-3, .cls-32, .cls-38, .cls-39, .cls-42, .cls-5, .cls-7, .cls-8 {stroke-miterlimit: 10;}

.cls-4 {fill: url(#radial-gradient);}

.cls-17, .cls-27, .cls-5, .cls-8 {stroke: #000;}

.cls-6 {fill: url(#radial-gradient-2);}

.cls-11, .cls-7 {stroke-width: 18px;}

.cls-7 {stroke: url(#radial-gradient-3);}

.cls-8 {stroke-width: 12px;}

.cls-9 {fill: url(#radial-gradient-4);}

.cls-10 {fill: url(#radial-gradient-5);}

.cls-11 {stroke: url(#radial-gradient-6);}

.cls-12 {fill: url(#linear-gradient-3);}

.cls-13 {fill: url(#linear-gradient-4);}

.cls-14 {fill: url(#linear-gradient-5);}

.cls-15 {fill: url(#linear-gradient-6);}

.cls-16 {fill: url(#linear-gradient-7);}

.cls-17 {fill: #999;stroke-width: 0.5px;}

.cls-18 {fill: url(#linear-gradient-8);}

.cls-19 {fill: url(#linear-gradient-9);}

.cls-20 {fill: url(#linear-gradient-10);}

.cls-21 {fill: url(#linear-gradient-11);}

.cls-22 {fill: url(#linear-gradient-12);}

.cls-23 {stroke-width: 20px;stroke: url(#linear-gradient-13);}

.cls-24 {fill: url(#linear-gradient-14);}

.cls-25 {stroke: #4d4d4d;}

.cls-25, .cls-27, .cls-32 {stroke-width: 0.25px;}

.cls-26 {fill: url(#linear-gradient-15);}

.cls-27 {fill: url(#linear-gradient-16);}

.cls-28 {fill: url(#linear-gradient-17);}

.cls-29 {fill: url(#linear-gradient-18);}

.cls-30 {fill: url(#linear-gradient-19);}

.cls-31 {fill: url(#radial-gradient-7);}

.cls-32, .cls-39 {stroke: #333;}

.cls-32 {fill: url(#linear-gradient-20);}

.cls-33 {fill: url(#linear-gradient-21);}

.cls-34 {fill: url(#linear-gradient-22);}

.cls-35 {fill: url(#radial-gradient-8);}

.cls-36 {fill: #232121;}

.cls-37 {fill: url(#radial-gradient-9);}

.cls-38 {fill: #666;stroke: #1a1a1a;}

.cls-39 {stroke-width: 4px;}

.cls-40 {fill: url(#linear-gradient-23);}

.cls-41 {fill: url(#linear-gradient-24);}

.cls-42 {fill: url(#radial-gradient-10);stroke: url(#radial-gradient-11);}

</style>

5、代码整体结构。

6、查看效果。