css按钮点击后需要短暂闪亮效果怎么办_用filter-brightness与keyframes制作亮度闪烁-css教程-PHP中文网

css按钮点击后需要短暂闪亮效果怎么办_用filter-brightness与keyframes制作亮度闪烁

P粉602998670

发布： 2025-12-17 02:13:31

原创

576人浏览过

用 :active 伪类配合 @keyframes 和 filter: brightness() 实现按钮点击闪亮效果，推荐亮度1.6、时长250ms、ease-out缓动；快速连点宜改用 JS 控制 class 防错乱，IE 可降级 box-shadow 模拟。

css按钮点击后需要短暂闪亮效果怎么办_用filter-brightness与keyframes制作亮度闪烁

按钮点击后加短暂闪亮效果，用 filter: brightness() 配合 @keyframes 是轻量又兼容性好的方案，不需要 JS，纯 CSS 即可实现。

核心思路：点击瞬间提亮再恢复

利用 :active 伪类触发动画，或配合 animation + 自定义 class（如 .clicked）控制。推荐用 :active，简洁直接，适合即时反馈。

亮度值范围：brightness(1) 是原始亮度，brightness(1.5) 表示提升 50%，brightness(2) 更亮；别超过 3，否则容易过曝失真
动画时长：建议 150–300ms，太短感知弱，太长像卡顿
缓动函数：用 ease-out 或 ease-in-out，比线性更自然

基础实现（:active + keyframes）

直接在按钮上写：

@keyframes flash-bright {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}
<p>.btn {
padding: 8px 16px;
border: none;
background: #4a6fa5;
color: white;
cursor: pointer;
transition: filter 0.1s; /<em> 让离开时的恢复也平滑 </em>/
}</p><p>.btn:active {
animation: flash-bright 0.25s ease-out;
}

登录后复制