1、新建html文档。
2、书写hmtl代艨位雅剖码。<div id="bike"> <svg i颊俄岿髭d="Layer_1" data-name="Layer 1" viewBox="0 0 1125.6 650.76"><defs> <lineargradient id="linear-gradient" x1="2269.23" y1="148.43" x2="2286.23" y2="148.43" gradientTransform="matrix(-1, 0, 0, 1, 2782.43, 252.03)" gradientUnits="userSpaceOnUse"> <stop offset="0.02" stop-color="#434343"></stop> <stop offset="0.04" stop-color="#454545"></stop> <stop offset="0.51" stop-color="#7c7c7c"></stop> <stop offset="0.6" stop-color="#6d6d6d"></stop> <stop offset="0.86" stop-color="#454545"></stop> <stop offset="1" stop-color="#363636"></stop> </lineargradient> <lineargradient id="linear-gradient-2" x1="2259.85" y1="95.53" x2="2295.72" y2="95.53" gradientTransform="matrix(-1, 0, 0, 1, 2811.43, 385.97)" gradientUnits="userSpaceOnUse"> <stop offset="0.02" stop-color="#222"></stop> <stop offset="0.11" stop-color="#262626"></stop> <stop offset="0.2" stop-color="#333"></stop> <stop offset="0.29" stop-color="#484848"></stop> <stop offset="0.39" stop-color="#666"></stop> <stop offset="0.49" stop-color="#8c8c8c"></stop> <stop offset="0.51" stop-color="#969696"></stop> <stop offset="0.57" stop-color="#838383"></stop> <stop offset="0.69" stop-color="#606060"></stop> <stop offset="0.81" stop-color="#474747"></stop> <stop offset="0.91" stop-color="#373737"></stop> <stop offset="1" stop-color="#323232"></stop> </lineargradient> <radialgradient id="radial-gradient" cx="261.5" cy="544.9" r="24.43" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse"> <stop offset="0.25" stop-color="gray"></stop> <stop offset="0.26" stop-color="#838383"></stop> <stop offset="0.43" stop-color="#ababab"></stop> <stop offset="0.57" stop-color="#c3c3c3"></stop> <stop offset="0.65" stop-color="#ccc"></stop> <stop offset="0.73" stop-color="#c9c9c9"></stop> <stop offset="0.79" stop-color="#bfbfbf"></stop> <stop offset="0.84" stop-color="#aeaeae"></stop> <stop offset="0.9" stop-color="#979797"></stop> <stop offset="0.94" stop-color="#797979"></stop> <stop offset="0.99" stop-color="#545454"></stop> <stop offset="1" stop-color="#4d4d4d"></stop> </radialgradient> <radialgradient id="radial-gradient-2" cx="261.55" cy="552.46" r="33.24" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#969696"></stop> <stop offset="0.12" stop-color="#8e8e8e"></stop> <stop offset="0.31" stop-color="#777"></stop> <stop offset="0.54" stop-color="#515151"></stop> <stop offset="0.71" stop-color="#323232"></stop> </radialgradient> <radialgradient id="radial-gradient-3" cx="260.9" cy="544.9" r="215.1" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient"></radialgradient> <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-grad足毂忍珩ient);}.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、查看效果。
