可通过纯HTML5和CSS实现文字缩小悬停按钮动画：一、用transform:scale()配合transition；二、直接调整font-size；三、用CSS变量控制缩放比；四、结合overflow:hidden防溢出；五、用transform-origin指定缩放原点。
如果您希望在网页中创建一个带有文字缩小效果的悬停按钮动画，可以通过纯 HTML5 和 CSS 实现，无需 JavaScript。以下是实现该效果的具体步骤：
一、使用 transform: scale() 配合 transition
该方法通过 CSS 的 transform: scale() 属性控制文字缩放，并利用 transition 实现平滑过渡效果。按钮默认状态显示正常文字大小，悬停时将文字缩小至指定比例。
1、在 HTML 中创建一个 <button> 元素，内部包含文本内容。
2、为该按钮添加自定义类名，例如 hover-shrink-btn。
立即学习“前端免费学习笔记（深入）”；
3、在 CSS 中定义该类的基础样式，包括字体大小、内边距、背景色和 transition: transform 0.3s ease。
4、在 :hover 伪类中设置 transform: scale(0.85)，使文字缩小至原尺寸的 85%。
二、结合 font-size 动态调整
此方法直接修改 font-size 属性值，配合 transition 实现文字尺寸变化。适用于需精确控制字号像素值或需兼容旧版浏览器的场景。
1、为按钮设置初始 font-size: 16px 及 transition: font-size 0.25s cubic-bezier(0.4, 0, 0.2, 1)。
2、在 :hover 状态中将 font-size 修改为 14px。
3、确保按钮的 line-height 和 padding 值足够容纳尺寸变化，避免布局抖动。
三、使用 CSS 自定义属性（CSS Variables）动态控制缩放比
该方案借助 CSS 自定义属性实现可复用、易维护的缩放逻辑，支持统一修改多个按钮的缩放比例而无需逐个调整。
1、在按钮的 CSS 类中定义变量，例如 --shrink-ratio: 0.9。
2、基础样式中使用 transform: scale(1) 并声明 transition: transform 0.3s ease。
3、在 :hover 中写入 transform: scale(var(--shrink-ratio))。
4、如需为不同按钮设置不同缩放比，可在对应元素上通过 style="--shrink-ratio: 0.75" 覆盖变量值。
四、配合 overflow: hidden 限制文字裁剪边界
当按钮尺寸固定且文字缩小后需保持居中对齐、不溢出容器时，可启用 overflow: hidden 并结合 text-align: center 和 line-height 精确控制视觉位置。
1、为按钮设置明确的 width 和 height，例如 width: 120px; height: 40px。
2、添加 overflow: hidden 以防止缩放过程中文字边缘轻微溢出。
3、设置 line-height: 40px 使文字垂直居中，text-align: center 实现水平居中。
4、在 :hover 中应用 transform: scale(0.88)，并确认缩放中心点为默认的 center center。
五、使用 transform-origin 精确控制缩放锚点
默认缩放以元素中心为原点，若需从顶部、左侧或特定坐标开始缩小文字，可通过 transform-origin 指定变换原点位置。
1、在按钮基础样式中添加 transform-origin: top left，使缩放以左上角为基准点。
2、设置 transition: transform 0.28s ease-out 保证动画节奏自然。
3、在 :hover 中使用 transform: scale(0.82)，观察文字是否从设定原点开始收缩。
4、可尝试其他值如 bottom right 或具体像素坐标 50% 25% 来适配不同设计需求。
