如何缩小button元素内部CSS动画尺寸并使其适配按钮大小

解决方案 #

核心思路是将动画所有固定像素单位替换为相对单位em，通过控制.lds-facebook的font-size即可一键调整动画整体尺寸，同时调整按钮布局避免内容裁切：

1. 按钮新增flex布局，实现内部元素垂直居中，避免动画被裁切
2. 所有动画相关的像素值统一换算为相对单位，实现尺寸的统一管控
3. 保留原有动画效果的所有比例和运动逻辑

修改后完整代码如下：

button {
  background-color: #000;
  color: #fff;
  /* 新增布局样式 */
  display: inline-flex;
  align-items: center;
  gap: 10px; /* 控制动画和文字的间距，可按需调整 */
  padding: 8px 16px; /* 按钮内边距，可按需调整 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.lds-facebook {
  display: inline-block;
  position: relative;
  /* 原80px改为10em，整体尺寸由font-size控制 */
  width: 10em;
  height: 10em;
  /* 调整这个值就可以缩放动画大小，当前4px为缩小后的尺寸，要恢复原尺寸设为8px即可 */
  font-size: 4px; 
}

.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 1em; /* 原8px换算为相对单位 */
  width: 2em; /* 原16px换算为相对单位 */
  background: #fff;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
  left: 1em; /* 原8px换算为相对单位 */
  animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
  left: 4em; /* 原32px换算为相对单位 */
  animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
  left: 7em; /* 原56px换算为相对单位 */
  animation-delay: 0;
}

@keyframes lds-facebook {
  0% {
    top: 1em; /* 原8px换算为相对单位 */
    height: 8em; /* 原64px换算为相对单位 */
  }
  50%,
  100% {
    top: 3em; /* 原24px换算为相对单位 */
    height: 4em; /* 原32px换算为相对单位 */
  }
}

<button>
  <div class="lds-facebook">
    <div></div>
    <div></div>
    <div></div>
  </div>
  Processing
</button>

后续如果需要调整动画尺寸，仅修改.lds-facebook的font-size数值即可，不需要改动其他动画相关属性，按钮会自动适配内部内容不会出现裁切问题。

内容的提问来源于stack exchange，提问作者AJ Jones