css3+SVG画UI自行车

2025-11-05 21:32:58

1、新建html文档。

css3+SVG画UI自行车

2、书写hmtl代码。

<defs>

</lineargradient>

</lineargradient>

</radialgradient>

</radialgradient>

css3+SVG画UI自行车

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>

css3+SVG画UI自行车

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>

css3+SVG画UI自行车

5、代码整体结构。

css3+SVG画UI自行车

6、查看效果。

css3+SVG画UI自行车

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。