效果
Kapture 2025-06-30 at 18.05.48.gif
代码
<svg class="dv-border-svg-container" width="784" height="327"><defs><path id="border-box-8-path-477025bf8d0f47fda8fc8a4b065ff833" d="M2.5, 2.5 L781.5, 2.5 L781.5, 324.5 L2.5, 324.5 L2.5, 2.5" fill="transparent"></path><radialGradient id="border-box-8-gradient-477025bf8d0f47fda8fc8a4b065ff833" 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="border-box-8-mask-477025bf8d0f47fda8fc8a4b065ff833"><circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-477025bf8d0f47fda8fc8a4b065ff833)"><animateMotion dur="3s" path="M2.5, 2.5 L781.5, 2.5 L781.5, 324.5 L2.5, 324.5 L2.5, 2.5" rotate="auto" repeatCount="indefinite"></animateMotion></circle></mask></defs><polygon fill="#ffffff00" points="5, 5 779, 5 779 322 5, 322"></polygon><use stroke="#83BFF6" stroke-width="1" xlink:href="#border-box-8-path-477025bf8d0f47fda8fc8a4b065ff833"></use><use stroke="#00CED1" stroke-width="3" xlink:href="#border-box-8-path-477025bf8d0f47fda8fc8a4b065ff833" mask="url(#border-box-8-mask-477025bf8d0f47fda8fc8a4b065ff833)"><animate attributeName="stroke-dasharray" from="0, 2212" to="2212, 0" dur="3s" repeatCount="indefinite"></animate></use></svg>
