Breathing Glow 呼吸缩放字
A breathing headline: scale up while the glow changes colour and widens. 会呼吸的标题:放大的同时光晕变色并且变宽。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The keyframe moves scale from 1 to 1.15 and swaps a tight yellow shadow for two wider pink ones at the midpoint. Pairing the scale with a colour change is what prevents it from looking like a zoom — the light appears to intensify as the text grows. 关键帧把 scale 从 1 推到 1.15,并在中点把紧贴的黄色光晕换成两层更宽的粉色。缩放配合变色,才不会看成单纯放大——字变大的同时,光看起来也在变强。
What to change可以改的地方
- 1Animate only the shadows and drop the scale for a purely luminous pulse.
- 2Use a 4s duration with ease-in-out for a calmer breathing rate.
- 1只动光晕、不动 scale,就是纯粹的呼吸灯。
- 2时长拉到 4s 配 ease-in-out,呼吸会平缓很多。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。