按钮悬停时通过 box-shadow 和 transition 实现阴影变化，先设置基础样式（如背景色、圆角、初始阴影），再用 :hover 伪类增强阴影（如 0 8px 15px），并添加 transition: box-shadow 0.3s ease 实现平滑过渡，推荐 duration 0.2s–0.3s 以平衡响应与自然感，可单独控制属性避免冗余过渡，提升交互质感。
按钮在悬停时产生阴影变化，是提升界面交互感的常用技巧。通过 box-shadow 和 transition 的配合，可以实现平滑自然的视觉过渡效果。
先定义按钮的基本外观，包括背景色、边框、圆角和内边距，确保初始状态下没有阴影或有轻微阴影。
.button {
padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
/* 初始阴影（可选） */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
当用户将鼠标移到按钮上时，扩大阴影范围，模拟“浮起”效果。使用 :hover 伪类修改 box-shadow 值。
.button:hover {
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
为了让阴影变化不显得突兀，加入 transition 属性，指定对 box-shadow 进行过渡，并设置持续时间（duration）。
立即学习“前端免费学习笔记（深入）”；
.button {
/* 其他样式保持不变 */
transition: box-shadow 0.3s ease;
}
</font>这里 0.3s 表示阴影变化耗时 300 毫秒，ease 是默认缓动函数，让动画开始慢、中间快、结束慢，更自然。
你也可以尝试不同的 duration 值：
为防止其他属性意外触发过渡，建议只针对 box-shadow 做过渡。如果按钮还有颜色变化，可单独列出：
.button {
transition: box-shadow 0.3s ease, background-color 0.2s ease;
}
这样控制更精细，避免整体使用 all 导致性能或视觉上的不协调。
基本上就这些。box-shadow 配合 transition duration，简单却有效，能让按钮更有“可点击”的质感。关键在于阴影参数合理、过渡时间适中，不夸张也不迟钝。
以上就是CSS过渡如何实现按钮阴影变化_box-shadow与transition duration配合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
553
