<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>90x28圆角矩形蛇段动画</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>body { background:#fff; display:flex; align-items:center; justify-content:center; height:100vh; }.box { width:90px; height:28px; position:relative; }svg { width:100%; height:100%; display:block; }.bg { fill:none; stroke:#fff; stroke-width:1; }.snake {fill:none;stroke:#2B59FF;stroke-width:1;stroke-linecap:round;}
</style>
</head>
<body><div class="box"><div>文章</div><svg viewBox="0 0 90 28"><!-- 背景边框 --><rect x="1.5" y="1.5" width="87" height="25" rx="14" ry="14" class="bg"/><!-- 贪吃蛇段 --><rect id="snakeRect" x="1.5" y="1.5" width="87" height="25" rx="14" ry="14" class="snake"/></svg></div><script>
$(function(){var rect = document.getElementById("snakeRect");var len = rect.getTotalLength(); // 周长var seg = 30; // 蛇的长度 (像素)var gap = len - seg; // 空白长度// 设置 dasharray 只留一小段$(rect).css({'stroke-dasharray': seg + " " + gap,'stroke-dashoffset': 0});// 动态生成 keyframesvar animName = "snakeMove_" + Math.floor(Math.random()*1e6);var keyframes = `@keyframes ${animName} {from { stroke-dashoffset: 0; }to { stroke-dashoffset: -${len}px; }}`;$('<style>').text(keyframes).appendTo('head');// 应用动画$(rect).css({'animation': `${animName} 2s linear infinite`});
});
</script>
</body>
</html>
