分享一下本站使用的加载占位符svg

麻辣工夫茶

2026 年 02 月 22 日

86 次浏览

1 条评论

375字数

有些东西

有站长对本站这个图片懒加载的动画感兴趣，那就把svg代码放出来，各位站长如需使用的可以自取。（请下载到贵站服务器使用，不要直接引用本站资源）

svg样式由Ai辅助生成，使用的颜色为#ff6699（哔哩哔哩同款粉色），可自行替换颜色。

效果预览：

请勿之间引用本站图片

代码（创建文本文件后粘贴，改后缀为svg格式）：

<svg width="100%" height="100%" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="pinkGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ff99cc"/>
      <stop offset="100%" stop-color="#ff6699"/>
    </linearGradient>
  </defs>
  <g transform="translate(100,100)">
    <circle cx="-15" cy="0" r="5" fill="url(#pinkGrad)" opacity="0.7">
      <animate attributeName="r" values="5;7;5" dur="1.2s" repeatCount="indefinite" begin="0s"/>
      <animate attributeName="cy" values="0;-8;0" dur="1.2s" repeatCount="indefinite" begin="0s"/>
      <animate attributeName="opacity" values="0.7;1;0.7" dur="1.2s" repeatCount="indefinite" begin="0s"/>
    </circle>
    <circle cx="0" cy="0" r="5" fill="url(#pinkGrad)" opacity="0.7">
      <animate attributeName="r" values="5;7;5" dur="1.2s" repeatCount="indefinite" begin="0.2s"/>
      <animate attributeName="cy" values="0;-8;0" dur="1.2s" repeatCount="indefinite" begin="0.2s"/>
      <animate attributeName="opacity" values="0.7;1;0.7" dur="1.2s" repeatCount="indefinite" begin="0.2s"/>
    </circle>
    <circle cx="15" cy="0" r="5" fill="url(#pinkGrad)" opacity="0.7">
      <animate attributeName="r" values="5;7;5" dur="1.2s" repeatCount="indefinite" begin="0.4s"/>
      <animate attributeName="cy" values="0;-8;0" dur="1.2s" repeatCount="indefinite" begin="0.4s"/>
      <animate attributeName="opacity" values="0.7;1;0.7" dur="1.2s" repeatCount="indefinite" begin="0.4s"/>
    </circle>
  </g>
</svg>