如何让LinkedIn徽章实现平滑的淡入淡出过渡效果？

你当前的代码无法实现淡入淡出效果的核心原因是：display 属性不能通过 CSS transition 实现动画过渡。浏览器不会对 display: none 和 display: block/inline 之间的切换应用过渡效果。

要实现平滑的淡入淡出，你需要改用支持过渡的属性，比如 opacity（控制透明度）和 visibility（控制元素是否可交互/可见），结合 transition 来实现：

修改后的CSS代码： #

.badge-base {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 24px;
    left: 16%;
    /* 设置2-3秒的淡入淡出过渡 */
    transition: opacity 2.5s ease, visibility 2.5s ease;
}

.Heading:hover + .badge-base,
.badge-base:hover {
    opacity: 1;
    visibility: visible;
}

关键说明： #

• opacity: 0 让元素完全透明，visibility: hidden 确保元素不可交互（避免透明状态下仍能点击）
• 过渡时同时修改 opacity 和 visibility，保证动画结束后元素正常可交互
• 调整 transition 的时长为你需要的2-3秒，ease 是默认的缓动函数，也可以换成 linear 等其他选项

这样修改后，当鼠标悬停到 .Heading 或者徽章本身时，就能实现平滑的淡入效果；鼠标移开时则会淡出。

内容的提问来源于stack exchange，提问作者G-Mail Assistance