加载动画 · Unlucky Crab

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

[hidecontent type="vip1"]

<div class="virtual-card">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 111 84"
    height="84"
    width="111"
  >
    <rect
      stroke-dasharray="4 4"
      stroke-width="2"
      stroke="black"
      fill="white"
      transform="matrix(-1.31134e-07 1 1 1.31134e-07 -1.31134e-07 40.7759)"
      rx="3.40064"
      height="65.6552"
      width="41.2241"
      y="1"
      x="1"
    ></rect>
    <rect
      fill="black"
      transform="rotate(-180 65.7758 58.6293)"
      height="10.3362"
      width="63.8966"
      y="58.6293"
      x="65.7758"
    ></rect>
    <path
      class="plus-one"
      stroke-width="2"
      stroke="black"
      d="M70.8334 15L70.8334 19.6954M70.8334 19.6954H66.1379M70.8334 19.6954H75.5288M70.8334 19.6954V24.3909"
    ></path>
    <path
      class="plus-two"
      stroke-width="2"
      stroke="black"
      d="M93.955 39L93.955 45.8171M93.955 45.8171H87.1379M93.955 45.8171H100.772M93.955 45.8171V52.6341"
    ></path>
    <path
      class="plus-three"
      stroke-width="2"
      stroke="black"
      d="M99.9622 0L99.9622 10.8242M99.9622 10.8242H89.1379M99.9622 10.8242H110.786M99.9622 10.8242V21.6484"
    ></path>
    <path
      class="plus-four"
      stroke-width="2"
      stroke="black"
      d="M87.4913 22L87.4913 26.3535M87.4913 26.3535H83.1379M87.4913 26.3535H91.8448M87.4913 26.3535V30.7069"
    ></path>
    <path
      class="plus-five"
      stroke-width="2"
      stroke="black"
      d="M77.8447 1V3.70685M77.8447 3.70685H75.1379M77.8447 3.70685H80.5516M77.8447 3.70685V6.4137"
    ></path>
    <path
      class="plus"
      stroke-width="2"
      stroke="black"
      d="M76.8447 40V42.7068M76.8447 42.7068H74.1379M76.8447 42.7068H79.5516M76.8447 42.7068V45.4137"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by VashonG  - Tags: icon, fintech, credit */
.virtual-card,
.physical-card,
.tokenized-card {
  margin: 0 50px;
}

.plus {
  animation: plus 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-one {
  animation: plus 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-two {
  animation: plus 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-three {
  animation: plus 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-four {
  animation: plus 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.plus-five {
  animation: plus 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes plus {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

</style>
    

[/hidecontent]