CSS动画实现

      .container-bg {
        background-image: linear-gradient(135deg, #8ecbe6, #e743c3);
      }

      .hm-line-top,
      .hm-line-middle,
      .hm-line-bottom {
        --height: 3px;
        display: block;
        width: 100%;
        height: var(--height);
        transition: 0.3s;
        transform-origin: center;
        background-color: #fff;
        position: absolute;
        top: calc(50% - var(--height) / 2);
        left: 0;
      }
      .hm-line-top {
        translate: 0 14px;
      }
      .hm-line-bottom {
        translate: 0 -14px;
      }

      .hm-button {
        position: relative;
        display: inline-flex;
        width: 48px;
        height: 48px;
        appearance: none;
        background: none;
        border: none;
        cursor: pointer;

        &.active {
          .hm-line-middle {
            opacity: 0;
            rotate: 90deg;
          }

          .hm-line-top {
            translate: 0 0;
            rotate: -135deg;
          }

          .hm-line-bottom {
            translate: 0 0;
            rotate: 135deg;
          }
        }
      }

    <div class="container container-bg">
      <button class="hm-button" aria-label="开启">
        <span class="hm-line-top"></span>
        <span class="hm-line-middle"></span>
        <span class="hm-line-bottom"></span>
      </button>
    </div>

      const button = document.querySelector(".hm-button");

      button.addEventListener("click", () => {
        const current = button.classList.contains("active");
        const next = !current; 
        button.classList.toggle("active", next);
        button.setAttribute("aria-label", next ? "关闭" : "开启");
      });

{/collapse-item}

      .content-bg-heart {
        background-image: linear-gradient(135deg, #ffc46e, #f043bf 100%);
      }

      .heart-button {
        position: relative;
        display: grid;
        width: 90px;
        height: 90px;
        cursor: pointer;
        place-items: center;
        appearance: none;
        border: none;
        background: none;
        user-select: none;

        &:hover {
          .heart-button-label {
            color: #fff;
            transform: rotate3d(0, 0, 0, 180deg) scale(1.2, 0.9);
          }

          .heart-button-back-inner {
            border: 1px dashed #fff;
            background-color: rgb(255 255 255 / 0);
            transform: scale(1.5);
          }
        }
      }

      .heart-button-label {
        position: relative;
        color: #f78198;
        font-size: 3rem;
        transform: scaleY(0.8);
        transition: 0.35s ease-in-out; 
        line-height: 1;
      }

      .heart-button-back {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: rotation 4s infinite linear;
      }

      .heart-button-back-inner {
        position: absolute;
        border: 2px solid #fff;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        transition: 0.2s ease;
        top: 0;
        left: 0;
        box-sizing: border-box; 
      }

      @keyframes rotation {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

 <section class="container content-bg-heart">
      <button class="heart-button" >
        <span class="heart-button-back">
          <span class="heart-button-back-inner"></span>
        </span>
        <span class="heart-button-label"></span>
      </button>
    </section>

{/collapse-item}

    .content-bg-check {
        background-image: linear-gradient(
          -135deg,
          #9cece3 0%,
          #7496ea 40%,
          #7393ea 60%,
          #4b3cf2 100%
        );
      }
      .circle {
        position: relative;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        box-shadow: inset 0 0 0 2px #fff;

        --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
        --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); 
        --circle-bg-color: #7393ea; 

        &.animation {
          animation: circle-filling-animation 0.3s ease 1.2s forwards;

          .circle-cover-1::before {
            animation: circle-draw-animation 0.4s var(--ease-in-expo) 0.4s
              forwards;
          }

          .circle-cover-2::before {
            animation: circle-draw-animation 0.4s var(--ease-out-expo) 0.8s
              forwards;
          }
          .circle-illust {
            animation: circle-check-animation 0.9s 1.4s forwards;
            animation-timing-function: linear(
              0,
              1.32,
              0.87,
              1.05,
              0.98,
              1.01,
              1,
              1
            );
          }
        }
      }

      .circle-cover-1,
      .circle-cover-2 {
        position: absolute;
        overflow: hidden;
        width: 50%;
        height: 100%;

        &::before,
        &::before {
          position: absolute;
          content: "";
        }
      }

      .circle-cover-1 {
        left: 50%;

        &:before {
          width: 100%;
          height: 200%;
          background: var(--circle-bg-color);
          transform-origin: 0 25%;
        }
      }

      .circle-cover-2::before {
        left: -10%;
        width: 110%;
        height: 120%;
        background: var(--circle-bg-color);
        transform-origin: 100% 40%;
      }
      .circle-illust {
        --size: 64px;
        position: absolute;
        width: var(--size);
        height: var(--size);
        color: var(--circle-bg-color);
        top: calc(50% - var(--size) / 2);
        left: calc(50% - var(--size) / 2);
        transform-origin: 50% 50%;
        opacity: 0;
        svg {
          width: 100%;
          height: 100%;
        }
      }
      @keyframes circle-draw-animation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(180deg);
        }
      }
      @keyframes circle-filling-animation {
        0% {
          box-shadow: inset 0 0 0 9px #ffffff;
        }
        100% {
          box-shadow: inset 0 0 0 50px #ffffff;
        }
      }
      @keyframes circle-check-animation {
        0% {
          transform: scale(0) rotate(-10deg);
          opacity: 0;
        }
        100% {
          transform: scale(1) rotate(0deg);
          opacity: 1;
        }
      }

    <div class="container content-bg-check">
      <div class="circle animation">
        <span class="circle-cover-1"></span>
        <span class="circle-cover-2"></span>
        <span class="circle-illust">
          <svg viewBox="0 0 24 24" fill="none">
            <path
              d="M9 16.2L4.8 12L3.4 13.4L9 19L21 7L19.6 5.6L9 16.2Z"
              fill="currentColor"
            />
          </svg>
        </span>
      </div>
    </div>

    setInterval(() => {
      const el = document.querySelector(".circle");
      el.classList.remove("animation");
      setTimeout(() => {
        el.classList.add("animation");
      }, 16);
    }, 4000);

{/collapse-item}

      .container-bg-loading {
        background-color: #f9f9f9;
        box-shadow: inset 0 0 0 1px #ddd;
      }



      .loading {
        position: relative;
        width: 100px;
        height: 100px;
        user-select: none;
      }

      .loading::after {
        border-radius: 40%;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          #ee88aa,
          rgb(250 238 255 / 0.3) 90%,
          rgb(230 238 255 / 0.5)
        );
        animation: loading-circle-opacity 3s infinite linear;
      }

      .loading-circle-1,
      .loading-circle-2,
      .loading-circle-3 {
        opacity: 0.4;
        position: absolute;
        background: #0af; /* 水色 */
        width: 100px;
        height: 100px;
        transform-origin: 50% 47%; 
        border-radius: 40%;
        animation: loading-circle-rotation 3s infinite linear;
      }

      .loading-circle-2 {
        opacity: 0.2;
        background: #ff0; /* 黄色 */
        animation: loading-circle-rotation 5s infinite linear;
      }

      .loading-circle-3 {
        animation: loading-circle-rotation 2.5s infinite linear;
      }

      .loading-label {
        position: absolute;
        top: 33px;
        width: 100%;
        z-index: 1;
        color: #fff;
        text-align: center;
        font-size: 0.7rem;
        line-height: 2rem;
        letter-spacing: 0.15em;
        animation: loading-label-opacity 300ms infinite linear;
      }

      @keyframes loading-circle-rotation {
        from {
          rotate: 0deg;
        }
        to {
          rotate: 360deg;
        }
      }

      @keyframes loading-circle-opacity {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.7;
        }
      }

      @keyframes loading-label-opacity {
        0% {
          opacity: 1;
        }
        25% {
          opacity: 0.8;
        }
        50% {
          opacity: 0.9;
        }
        75% {
          opacity: 0.6;
        }
      }

<div class="container container-bg-loading">
      <div class="loading">
        <span class="loading-label">LOADING</span>
        <span class="loading-circle-1"></span>
        <span class="loading-circle-2"></span>
        <span class="loading-circle-3"></span>
      </div>
    </div>

{/collapse-item}