CSS波浪动画无法覆盖按钮宽度的适配问题求助

问题描述 #

• 波浪动画运行正常，但无法适配按钮宽度，侧边存在多余空隙
• 希望波浪在所有屏幕尺寸下覆盖按钮的整个宽度，且不改变按钮高度与动画样式

原始代码 #

HTML代码 #

<div class="customer-main">
  <a href="#"><i class="fa-solid fa-box"></i> <span>Orders</span></a>
  <a href="#"><i class="fa-solid fa-heart"></i> <span>Wishlist</span></a>
  <a href="#"><i class="fa-solid fa-ticket"></i> <span>Coupons</span></a>
  <a href="#"><i class="fa-solid fa-envelope"></i> <span>Contact Us</span></a>
</div>

CSS代码 #

@import url("https://fonts.googleapis.com/css?family=Noto+Sans");

.customer-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 15px;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.customer-main a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  color: #007bff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 140px;
  height: 45px;
  border: 2px solid #007bff;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.customer-main a i {
  margin-right: 8px;
}

.customer-main a:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 130px;
  background-color: #0097e6;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  animation: wave 5s infinite linear;
  transition: all 1s;
}

.customer-main a:hover:before {
  top: 15px;
}

@keyframes wave {
  0% {
    transform: translate(-50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%) rotate(360deg);
  }
}

.customer-main a span {
  position: relative;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  z-index: 1;
}

解决方案 #

核心修改点是将波浪元素的固定宽度改为相对父元素的百分比宽度，同时调整圆角和位置计算，确保旋转时完全覆盖按钮：

修改后的.customer-main a:before和@keyframes wave代码如下：

.customer-main a:before {
  content: "";
  position: absolute;
  /* 使用百分比宽度确保适配按钮尺寸 */
  width: 150%;
  height: 320px;
  /* 调整不对称圆角，让波浪边缘更贴合按钮宽度 */
  border-radius: 45% 55% 50% 50% / 60% 60% 40% 40%;
  background-color: #0097e6;
  top: 30px;
  left: 50%;
  /* 单独使用X轴平移，避免动画过程中位置偏移 */
  transform: translateX(-50%);
  animation: wave 5s infinite linear;
  transition: all 1s;
}

@keyframes wave {
  0% {
    transform: translateX(-50%) rotate(-180deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

修改说明 #

1. 宽度适配：将固定的width: 320px改为width: 150%，让波浪元素宽度始终是按钮的1.5倍，确保旋转时左右两侧完全覆盖按钮，不会出现空隙。
2. 圆角调整：替换单一圆形圆角为不对称值，让波浪形态更自然，同时旋转时边缘能更好贴合按钮的圆角轮廓。
3. 动画修正：拆分translate(-50%)为translateX(-50%)，在动画中保持X轴平移不变，只修改旋转角度，避免动画过程中出现位置偏移。

修改后，波浪动画会在所有屏幕尺寸下完全覆盖按钮宽度，同时保留原有的动画样式和按钮高度。

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