流星边框动画Vue3 html css版本，支持圆角 <svg width="${w}" height="${h}" s

Vue3

<script lang="ts" setup>
  import { ref, watch } from 'vue';

  import { useElementSize } from '@vueuse/core';

  import { getRandomId } from '@/utils';

  const containerRef = ref<HTMLElement | null>(null);
  const svgString = ref<string>('');

  // 使用 useElementSize 监听容器大小变化
  const { width, height } = useElementSize(containerRef);

  /**
   * 动态生成自适应宽高的流星边框SVG
   * @param {number} w - SVG宽度（像素）
   * @param {number} h - SVG高度（像素）
   * @returns {string} SVG字符串
   */
  function generateMeteorSvg(w: number, h: number): string {
    // 生成唯一ID（避免重复）
    const uniqueId = getRandomId(8, 'border-');
    const path1Color = '#235fa7';
    const path2Color = '#4fd2dd';

    const path1Width = 1;
    const path2Width = 3;

    const blank = 2.5;
    const pathLength = 2 * (w - 2 * blank) + 2 * (h - 2 * blank);
    const duration = 5;

    // SVG模板（替换动态参数）
    return `
      <svg width="${w}" height="${h}" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;">
        <defs>
          <path id="${uniqueId}-path"
            d="M${blank - path1Width / 2}, ${blank + path1Width / 2} L${w - blank}, ${blank} L${w - blank}, ${h - blank} L${blank}, ${h - blank} L${blank}, ${blank}" fill="transparent"></path>
          <path id="${uniqueId}-path2"
            d="M${blank / 2}, ${blank * 1.5} L${w - blank}, ${blank} L${w - blank}, ${h - blank} L${blank}, ${h - blank} L${blank}, ${blank}" fill="transparent"></path>
          <radialGradient id="${uniqueId}-gradient" cx="50%" cy="50%"
            r="50%">
            <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
          </radialGradient>
          <mask id="${uniqueId}-mask">
            <circle cx="0" cy="0" r="150"
              fill="url(#${uniqueId}-gradient)">
              <animateMotion dur="${duration}s" path="M${blank}, ${blank} L${w - blank}, ${blank} L${w - blank}, ${h - blank} L${blank}, ${h - blank} L${blank}, ${blank}"
                rotate="auto" repeatCount="indefinite"></animateMotion>
            </circle>
          </mask>
        </defs>
        <use stroke="${path1Color}" stroke-width="${path1Width}" href="#${uniqueId}-path"></use>
        <use stroke="${path2Color}" stroke-width="${path2Width}" href="#${uniqueId}-path2"
          mask="url(#${uniqueId}-mask)">
          <animate attributeName="stroke-dasharray" from="${w / 2 - 1 * blank}, ${pathLength - (w / 1 - 2 * blank)}" to="${pathLength + (w / 1 - 2 * blank)}, ${w / 2 - 1 * blank}" dur="${duration}s"
            repeatCount="indefinite"></animate>
        </use>
      </svg>
    `;
  }

  // 监听宽高变化，重新生成SVG
  watch(
    [width, height],
    ([newWidth, newHeight]) => {
      if (newWidth > 0 && newHeight > 0) {
        svgString.value = generateMeteorSvg(newWidth, newHeight);
      }
    },
    { immediate: true },
  );
</script>

<template>
  <div ref="containerRef" class="panel">
    <div v-html="svgString" class="meteor-border"></div>
    <div class="inbox">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .panel {
    position: relative;
    width: 100%;
    height: 100%;

    > .meteor-border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }

    > .inbox {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      padding: 6px;
    }
  }
</style>

html css版本，支持圆角

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      body {
        background: #000;
      }
      @keyframes opacityChange {
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes rotate {
        100% {
          transform: rotate(1turn);
        }
      }
      .border {
        --borderWidth: 8px;
        --borderRadus: 8px;
        width: 200px;
        height: 300px;
        position: relative;
        z-index: 0;
        overflow: hidden;
        padding: 2rem;
        z-index: 0;
        border-radius: var(--borderRadus);
        &::after,
        &::before {
          box-sizing: border-box;
          border-radius: var(--borderRadus);
        }
        &::before {
          content: '';
          position: absolute;
          z-index: -2;
          left: -50%;
          top: -50%;
          width: 200%;
          height: 200%;
          background-color: transparent;
          background-repeat: no-repeat;
          background-position: 0 0;
          background-image: conic-gradient(transparent, rgba(255, 0, 0, 1), transparent 30%);
          animation: rotate 4s linear infinite;
        }

        &::after {
          content: '';
          position: absolute;
          z-index: -1;
          left: calc(var(--borderWidth) / 2);
          top: calc(var(--borderWidth) / 2);
          width: calc(100% - var(--borderWidth));
          height: calc(100% - var(--borderWidth));
          background: #fff;
          /* animation: opacityChange 5s infinite linear; */
        }
      }
    </style>
  </head>
  <body>
    <div class="border"></div>
  </body>
</html>