#优质博文 #CSS #动画 #前端 #新特性
Elastic/Bouncy Text Effect：仅使用纯 CSS 实现一种有趣的悬停弹跳文字动画。目前该效果属于实验性特性，仅支持 Chrome 浏览器。

AI 摘要：这篇文章介绍了如何仅使用纯 CSS 实现一种有趣的弹性文字（Elastic/Bouncy Text）效果。作者 Temani Afif 通过组合使用最新的 CSS 特性，如 shape() 函数、 sibling-index() / sibling-count() 索引函数以及 linear() 缓动函数，实现了文字在悬停时的动态曲线跳动。虽然该技术目前仅支持 Chrome 浏览器且对 HTML 结构有特定要求（如每个字母需独立包装并使用等宽字体），但它展示了现代 CSS 在路径动画和动态计算方面的强大能力。

author Temani Afif

Css-Tip

Elastic/Bouncy Hover Effect

A few lines of modern CSS to create a fancy elastic effect on hover