移动端与桌面端按钮CSS动画渲染不一致问题求助

开发者阿泽

2026-6-17

CSS按钮动画移动端边界框/背景异常问题

我为按钮编写的CSS动画在桌面端表现正常，但在移动端网页中无法正常呈现，出现奇怪的边界框/背景异常现象：

桌面端：按钮带有循环流动的发光边框及模糊光晕效果，显示正常
移动端：按钮周围出现异常的半透明矩形，破坏了预期视觉效果

相关代码

HTML代码

<button class="styled-button" onclick="handleClick()">
  <span class="chat-icon">💬</span>
  <span class="chat-text">Chat</span>
</button>

CSS代码

.styled-button {
  position: relative;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  height: 50px;
  margin-top: 24px;
  border-radius: 125px;
  background: linear-gradient(0deg, #000, #272727);
  border: none;
  cursor: pointer;
}
body {
    margin: 0;
    padding: 0;
    background-color: #000;
}
.styled-button::before,
.styled-button::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #87def9, black, #87def9, black, #87def9, black, #87def9, black, #87def9, black);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 125px;
  z-index: -1;
  animation: steam 30s linear infinite;
}

.styled-button::after {
  filter: blur(20px);
}

.chat-icon {
  font-size: 24px;
  margin-right: 8px;
  color: white;
}

.chat-text {
  font-size: 16px;
  color: white;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}