css样式：button边框贪吃蛇加载效果 

<!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
  });

  // 动态生成 keyframes
  var 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>
posted @ 2025-09-22 14:52  旧色染新烟  阅读(8)  评论(0)    收藏  举报