如何实现仅红色容器弹跳、文本静止的Button弹跳效果？

嘿，刚好能帮到你！你的需求是让红色按钮容器弹跳，但文本保持不动对吧？目前的代码把动画直接加在了<button>元素上，所以整个按钮（包括里面的文本）都会跟着缩放，这就是文本也弹跳的原因。咱们可以用伪元素分离视觉容器和文本的方法，不用改HTML结构就能实现目标效果：

修改后的代码 #

<button>Button Name</button>

button {
  width: 240px;
  color: var(--background-color-1);
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  position: absolute;
  top: 19vw;
  left: 50%;
  /* 修正居中：原代码left:50%但未偏移，加上这个让按钮真正水平居中 */
  transform: translateX(-50%);
  border: none;
  background: transparent; /* 按钮本身设为透明，让伪元素的红色背景显示出来 */
  padding: 16px 12px;
  position: relative; /* 让伪元素以按钮为定位基准 */
  z-index: 1; /* 确保文本始终在背景容器上方 */
}

/* 用伪元素创建红色背景容器，承载弹跳动画和阴影 */
button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  backface-visibility: hidden;
  filter: drop-shadow(0 0 15px yellow);
  animation: bounce 1s infinite alternate;
  z-index: -1; /* 把伪元素放在文本下方 */
}

@keyframes bounce {
  to {
    transform: scale(1.1);
    filter: drop-shadow(0 0 0 yellow);
  }
}

关键思路解析 #

• 分离结构与视觉：把按钮的红色背景、阴影和弹跳动画转移到::before伪元素上，按钮本身只负责渲染文本，这样文本就不会受到伪元素动画的影响。
• 层级控制：通过z-index确保文本始终在背景容器上方，避免被伪元素遮挡。
• 居中修正：原代码中left:50%只是让按钮左边缘居中，加上transform: translateX(-50%)才能让按钮整体水平居中，这是个容易忽略的细节哦。

如果不想用伪元素，也可以把按钮拆成<div>容器+<span>文本的结构，但伪元素方案更简洁，不需要修改HTML~

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