- SVG 元素:这部分包含了 SVG(可缩放矢量图形)代码,用于绘制一个自行车的轮廓。通过不同的
g
(组)、circle
(圆形)、polyline
(多边线)和path
(路径)元素组合起来形成完整的自行车形状。 - 动画效果:通过设置
stroke-dasharray
和stroke-dashoffset
属性,并结合 CSS 动画,实现了自行车各部分(如轮子、链条、座椅等)的动态效果。 - 样式控制:每个 SVG 元素都有特定的类名。
- CSS 样式:这部分定义了自行车各部分的样式,包括颜色、尺寸以及关键帧动画来实现动态效果。
- 动画定义:通过
@keyframes
规则定义了多个动画,分别对应自行车的不同部位(如车身、前轮、把手等)的运动轨迹。 - 主题适应:通过媒体查询
@media (prefers-color-scheme: dark)
来适应深色模式下的显示效果。
html代码:
<div>
<svg class="loader" viewBox="0 0 48 30" width="48px" height="30px">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1">
<g transform="translate(9.5,19)">
<circle class="loader_tire" r="9" stroke-dasharray="56.549 56.549"></circle>
<g class="loader_spokes-spin" stroke-dasharray="31.416 31.416" stroke-
dashoffset="-23.562">
<circle class="loader_spokes" r="5"></circle>
<circle class="loader_spokes" r="5" transform="rotate(180,0,0)"></circle>
</g>
</g>
<g transform="translate(24,19)">
<g class="loader_pedals-spin" stroke-dasharray="25.133 25.133" stroke-
dashoffset="-21.991" transform="rotate(67.5,0,0)">
<circle class="loader_pedals" r="4"></circle>
<circle class="loader_pedals" r="4" transform="rotate(180,0,0)"></circle>
</g>
</g>
<g transform="translate(38.5,19)">
<circle class="loader_tire" r="9" stroke-dasharray="56.549 56.549"></circle>
<g class="loader_spokes-spin" stroke-dasharray="31.416 31.416" stroke-
dashoffset="-23.562">
<circle class="loader_spokes" r="5"></circle>
<circle class="loader_spokes" r="5" transform="rotate(180,0,0)"></circle>
</g>
</g>
<polyline class="loader_seat" points="14 3,18 3" stroke-dasharray="5 5">
</polyline>
<polyline class="loader_body" points="16 3,24 19,9.5 19,18 8,34 7,24 19" stroke-
dasharray="79 79">
</polyline>
<path class="loader_handlebars" d="m30,2h6s1,0,1,1-1,1-1,1" stroke-dasharray="10
10"></path>
<polyline class="loader_front" points="32.5 2,38.5 19" stroke-dasharray="19 19">
</polyline>
</g>
</svg>
</div>
css代码:
.loader {
display: block;
width: 150px;
height: auto;
}
.loader_body,
.loader_front,
.loader_handlebars,
.loader_pedals,
.loader_pedals-spin,
.loader_seat,
.loader_spokes,
.loader_spokes-spin,
.loader_tire {
animation: bikeBody 3s ease-in-out infinite;
stroke: var(--primary);
transition: stroke var(--trans-dur);
}
.loader_front {
animation-name: bikeFront;
}
.loader_handlebars {
animation-name: bikeHandlebars;
}
.loader_pedals {
animation-name: bikePedals;
}
.loader_pedals-spin {
animation-name: bikePedalsSpin;
}
.loader_seat {
animation-name: bikeSeat;
}
.loader_spokes,
.loader_tire {
stroke: currentColor;
}
.loader_spokes {
animation-name: bikeSpokes;
}
.loader_spokes-spin {
animation-name: bikeSpokesSpin;
}
.loader_tire {
animation-name: bikeTire;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue), 90%, 10%);
--fg: hsl(var(--hue), 90%, 90%);
}
}
/* Animations */
@keyframes bikeBody {
from {
stroke-dashoffset: 79;
}
33%,
67% {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -79;
}
}
@keyframes bikeFront {
from {
stroke-dashoffset: 19;
}
33%,
67% {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -19;
}
}
@keyframes bikeHandlebars {
from {
stroke-dashoffset: 10;
}
33%,
67% {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -10;
}
}
@keyframes bikePedals {
from {
animation-timing-function: ease-in;
stroke-dashoffset: -25.133;
}
33%,
67% {
animation-timing-function: ease-out;
stroke-dashoffset: -21.991;
}
to {
stroke-dashoffset: -25.133;
}
}
@keyframes bikePedalsSpin {
from {
transform: rotate(0.1875turn);
}
to {
transform: rotate(3.1875turn);
}
}
@keyframes bikeSeat {
from {
stroke-dashoffset: 5;
}
33%,
67% {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -5;
}
}
@keyframes bikeSpokes {
from {
animation-timing-function: ease-in;
stroke-dashoffset: -31.416;
}
33%,
67% {
animation-timing-function: ease-out;
stroke-dashoffset: -23.562;
}
to {
stroke-dashoffset: -31.416;
}
}
@keyframes bikeSpokesSpin {
from {
transform: rotate(0);
}
to {
transform: rotate(3turn);
}
}
@keyframes bikeTire {
from {
animation-timing-function: ease-in;
stroke-dashoffset: 56.549;
transform: rotate(0);
}
33% {
stroke-dashoffset: 0;
transform: rotate(0.33turn);
}
67% {
animation-timing-function: ease-out;
stroke-dashoffset: 0;
transform: rotate(0.67turn);
}
to {
stroke-dashoffset: -56.549;
transform: rotate(1turn);
}
}