绘制动态自行车CSS动画

• 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);
  }
}