加载动画 · Nice Mouse

类型：组件　·　分类：加载动画　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

   <svg class="svg">
      <path class="path"></path>
   </svg>
   <svg>
      <path></path>
   </svg>


<style>
/* From Uiverse.io by isfan4ik - Tags: red, green, pink, loader, effect loader, loading animation */
.body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg {
  position: absolute;
  width: 400px;
  fill: none;
}

.svg:nth-child(2) {
  filter: blur(40px);
}

.svg path {
  d: path("M0,25 C150,110 150, -60 300,25");
  stroke: #ff0092;
  stroke-width: 50;
  stroke-linecap: round;
  transform: translate(50px,50%);
  animation: animate 2s ease-in-out infinite;
}

@keyframes animate {
  0% {
    stroke: greenyellow;
    stroke: #ff0092;
    d: path("M0,25 C150,110 150, -60 300,25");
  }

  50% {
    stroke: dodgerblue;
    stroke: #00ff00;
    d: path("M0,25 C160,-50 140, 110 300,25");
  }
}
</style>

[/hidecontent]