想不到豆包還有代碼運(yùn)行的預(yù)覽圖 還是動(dòng)態(tài)的 感覺(jué)自己out了哈哈哈哈哈哈哈哈哈哈好像大一的時(shí)候才用代碼畫(huà)過(guò)愛(ài)心 最近完成了畢設(shè)的系統(tǒng) 想回家演示一下 讓媽媽看看我有多牛哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈#請(qǐng)用你的專(zhuān)業(yè)向媽媽表白#
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <style>
    @keyframes heartbeat {
      0% { transform: scale(1); }
      15% { transform: scale(1.2); }
      30% { transform: scale(1); }
      45% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }
    .heart {
      animation: heartbeat 1.5s infinite;
      transform-origin: center;
      fill: #ff5e87;
      filter: drop-shadow(0 0 15px rgba(255, 94, 135, 0.7));
    }
    .sparkle {
      animation: float 3s infinite ease-in-out;
      fill: white;
      opacity: 0;
    }
    .sparkle:nth-child(odd) {
      animation-delay: 0.5s;
    }
  </style>
  <g transform="translate(200, 180)">
    <path class="heart" d="M0,-60 C-70,-110 -150,-50 -150,30 C-150,100 -70,150 0,200 C70,150 150,100 150,30 C150,-50 70,-110 0,-60 Z" />
    <circle class="sparkle" cx="-80" cy="-30" r="5">
      <animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle class="sparkle" cx="80" cy="-40" r="6">
      <animate attributeName="opacity" values="0;1;0" dur="2.5s" repeatCount="indefinite" />
    </circle>
    <circle class="sparkle" cx="-60" cy="-80" r="4">
      <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle class="sparkle" cx="60" cy="-90" r="5">
      <animate attributeName="opacity" values="0;1;0" dur="2.2s" repeatCount="indefinite" />
    </circle>
    <circle class="sparkle" cx="-30" cy="-110" r="4">
      <animate attributeName="opacity" values="0;1;0" dur="2.7s" repeatCount="indefinite" />
    </circle>
    <circle class="sparkle" cx="30" cy="-100" r="5">
      <animate attributeName="opacity" values="0;1;0" dur="2.3s" repeatCount="indefinite" />
    </circle>
  </g>
</svg>