页面中心圆圈放大效果如何写

整页正中一颗深色圆，灰圈从它身上长出来，边大边淡，散没了又来一轮。样式在 css/circlePulse.css，页面是 index.html，没有脚本。

散开圈和中心圆谁在上、谁在下

.circle 只是舞台。真正看见的是里面四块：三块 .circle1～.circle3 负责放大，一块 .center 钉在最中间、自己不动。

html 里要先写三层散开圈，最后写 .center。后写的叠在上面，实心圆才能盖住圆心。反过来的话，放大过程中会看到中间被掏空，像个环在长，不是从实心点往外推。

只要散开、不要实心点，删掉 .center 就行。只要点、不要圈，三层 circle1～3 拿掉。

圆直径和页面居中如何计算

舞台定 200px 见方。top、left 写成 50%，左上角先到页面正中，再把 margin 设成宽高的一半、带负号：-100px 0 0 -100px。一半拉回去，盒子中心才落在屏幕中心。宽高改成 160px，负边距就要改成 -80px，两处一起改。

散开圈直径 60px，border-radius 写成一半 30px，才是正圆。它们相对舞台中心对齐，负边距同样是半径 -30px。.center 略大，70px，负边距 -35px，颜色更深，当锚点。

我第一次看也卡了一下：只改宽高、圆角还写死 30px，圆会变成胶囊。舞台还要能装下放大后的圈。本例放到 3 倍，60 × 3 = 180，舞台 200px 刚好；再放大却不改舞台，圈会画出盒子，旁边若有 overflow: hidden 就被切掉。

放大到外圈时如何慢慢变淡

三层圈共用 @keyframes circle。起点 scale(0) 且不透明，终点 scale(3) 且全透明。圆在变大的路上颜色跟着淡，到最外圈人眼就看不见，下一轮再从中心冒。

想散得更远，把 3 改成 4，同时把舞台加大，别只改倍数。只改 scale、不改 opacity，放大后还是实心灰饼，会把中心圆盖住。linear 匀速往外走；想先快后慢，缓动改成 ease-out。

三圈循环播放的时间差怎么写

一轮都是 3s、无限循环，差在第几个值：延迟。第一圈 0（省略不写），第二圈 0.8s，第三圈 1.6s。任意时刻总有一圈走在半路，看起来才是一圈接一圈，而不是三圈叠成一次胀大。

名字、时长、缓动、延迟、infinite，按这个顺序。这坑我见过不止一次：把 0.8s 写到时长那个位置，圈变得飞快，间隔也没了。加第四圈时，间隔仍按大约 0.8s 排，四个延迟可以写成 0 / 0.75s / 1.5s / 2.25s，都落在 3s 一轮里面。

套在图标、按钮或加载上如何改

页面正中那套直接用即可。要挂到图标或按钮上：外层自己定宽高，.circle 改成相对外层铺满，不要再 top/left: 50% 对整页。.center 里放图或两个字。加载就让中心空着，或写「加载」。外层不要 overflow: hidden，圈放到一半会被切平。

图标换成自己的地址；不要图、只要字，把 img 换成「加载」或按钮文案。颜色、圈数、3s 和 0.8s 按页面节奏改。