如何实现按钮hover时box-shadow淡入效果（CSS）

你的代码未生效是因为animation-duration需要配合@keyframes定义动画逻辑才能起作用，且直接在:hover状态切换box-shadow没有过渡衔接逻辑。下面提供两种可行的实现方式：

方法1：使用CSS Transition（推荐，更简洁） #

给按钮默认状态设置初始透明阴影，通过transition属性指定阴影的过渡时长，hover时切换为目标阴影即可：

.discord_join_button {
    color: rgba(255, 255, 255, 1); /* 将默认颜色移到这里，避免颜色突变 */
    box-shadow: 0 0 0px rgba(35, 50, 216, 0); /* 初始透明阴影 */
    transition: box-shadow 500ms ease; /* 指定阴影的过渡效果，时长500ms */
}

.discord_join_button:hover {
    box-shadow: 0 0 60px #2332d8; /* hover时的目标阴影 */
}

原理：利用transition属性让元素的box-shadow属性在状态切换时自动完成平滑过渡，无需额外定义动画帧。

方法2：使用CSS Keyframes动画 #

如果需要更复杂的动画逻辑，可以用@keyframes定义阴影从无到有的过程，再在hover状态触发动画：

@keyframes glowIn {
    from {
        box-shadow: 0 0 0px rgba(35, 50, 216, 0);
    }
    to {
        box-shadow: 0 0 60px #2332d8;
    }
}

.discord_join_button {
    color: rgba(255, 255, 255, 1);
}

.discord_join_button:hover {
    animation: glowIn 500ms forwards; /* forwards让动画结束后保持最后一帧状态 */
}

原理：通过@keyframes明确定义阴影的变化过程，hover时触发该动画，forwards属性确保鼠标悬停时保持最终的阴影效果。

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