Styled Components按钮实现指定发光效果问题求助

AI 小北

2026-8-12

解决内部发光效果问题

当前代码实现的是外部发光效果，要匹配示例中的内部发光，需做以下调整：

给box-shadow添加inset关键字，将外部阴影转为内部阴影
移除动画中对background-color的修改，保留原本的渐变背景，仅让发光效果做动画变化
调整阴影的扩散范围与透明度，让发光效果更贴合示例的柔和感

修改后的代码：

const LiveNow = styled.span`
  display: inline-block;
  padding: 0.5rem 0.8rem;
  background: transparent linear-gradient(180deg, #eb1a30 0%, #ea1973 100%) 0% 0% no-repeat padding-box;
  border-radius: 8px;
  font-size: 13px;
  color: #fff;
  flex-grow: 0;
  z-index: 1;
  position: absolute;
  top: 16px;
  left: 16px;
  font-weight: bold;
  animation: glowing 1300ms infinite;
  -webkit-animation: glowing 1300ms infinite;
  -moz-animation: glowing 1300ms infinite;
  -o-animation: glowing 1300ms infinite;

  @-webkit-keyframes glowing {
    0% {
      -webkit-box-shadow: inset 0 0 3px rgba(235, 26, 48, 0.8);
    }
    50% {
      -webkit-box-shadow: inset 0 0 15px rgba(234, 25, 115, 0.8);
    }
    100% {
      -webkit-box-shadow: inset 0 0 3px rgba(235, 26, 48, 0.8);
    }
  }

  @keyframes glowing {
    0% {
      box-shadow: inset 0 0 3px rgba(235, 26, 48, 0.8);
    }
    50% {
      box-shadow: inset 0 0 15px rgba(234, 25, 115, 0.8);
    }
    100% {
      box-shadow: inset 0 0 3px rgba(235, 26, 48, 0.8);
    }
  }
`;