LinkedIn徽章是展示个人职业身份或企业资质的常见元素，通过CSS实现其平滑淡入淡出效果，可以让页面交互更自然，不需要额外引入JavaScript库就能完成。实现该效果的核心是利用CSS的opacity属性和transition过渡属性，配合合适的触发条件控制透明度的变化。
核心实现原理
淡入淡出效果的本质是控制元素的透明度从0到1（淡入）或者从1到0（淡出）的平滑变化。CSS的transition属性可以定义在opacity属性发生变化时，过渡的时长和缓动函数，从而实现平滑的动画效果。
我们需要先定义LinkedIn徽章的基础样式，设置初始的透明度，然后通过伪类（如:hover）或者添加的CSS类来触发透明度的变化，过渡属性会自动处理变化过程。
基础样式与HTML结构
首先编写LinkedIn徽章的HTML结构，这里使用一个简单的div容器模拟徽章内容，实际使用时可以替换为真实的LinkedIn徽章嵌入代码。
<div class="linkedin-badge">
<div class="badge-content">
<p>LinkedIn 认证徽章</p>
<p>前端开发工程师</p>
</div>
</div>
接下来编写基础CSS样式，设置徽章的初始状态，这里先设置初始透明度为0，让徽章默认处于隐藏状态。
.linkedin-badge {
width: 200px;
height: 100px;
border: 2px solid #0077b5; /* LinkedIn品牌色 */
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
/* 初始透明度为0，完全透明 */
opacity: 0;
/* 定义过渡效果：opacity属性变化，时长0.5秒，缓动函数为ease-in-out */
transition: opacity 0.5s ease-in-out;
}
.badge-content {
color: #333;
text-align: center;
}
.badge-content p:first-child {
font-weight: bold;
color: #0077b5;
margin-bottom: 8px;
}
触发淡入淡出效果
常见的触发方式有两种，一种是通过鼠标悬停触发，另一种是通过添加/移除CSS类触发，适配不同的使用场景。
方式一：鼠标悬停触发
使用:hover伪类，当鼠标移动到徽章容器上时触发淡入，移开时触发淡出，这种方式适合需要用户主动交互的场景。
/* 鼠标悬停时，透明度变为1，实现淡入 */
.linkedin-badge:hover {
opacity: 1;
}
方式二：通过CSS类触发
如果需要更灵活的控制，比如页面加载完成后自动淡入，或者点击按钮触发淡出，可以通过添加/移除CSS类来实现。首先定义一个控制显示的类：
/* 显示类，透明度为1 */
.linkedin-badge.show {
opacity: 1;
}
然后通过JavaScript控制类的添加和移除，这里提供简单的示例代码：
// 页面加载完成后自动淡入
window.addEventListener('DOMContentLoaded', function() {
const badge = document.querySelector('.linkedin-badge');
// 延迟100ms添加show类，让初始样式先渲染
setTimeout(() => {
badge.classList.add('show');
}, 100);
});
// 点击徽章触发淡出
document.querySelector('.linkedin-badge').addEventListener('click', function() {
this.classList.remove('show');
});
效果优化建议
为了让效果更自然，还可以做一些额外的优化：
- 可以添加
visibility属性的过渡，避免透明元素仍然占据点击区域：transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;，初始状态设置visibility: hidden;，显示状态设置visibility: visible; - 可以调整缓动函数，比如使用
ease、linear或者cubic-bezier自定义缓动曲线，适配不同的动画节奏 - 如果需要淡入淡出时同时有缩放效果，可以添加
transform属性的过渡，比如transform: scale(0.8);到transform: scale(1);的变化
完整示例代码
以下是整合了所有功能的完整示例，可以直接复制到HTML文件中运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkedIn徽章淡入淡出效果</title>
<style>
.linkedin-badge {
width: 200px;
height: 100px;
border: 2px solid #0077b5;
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
margin: 50px auto;
}
.linkedin-badge.show {
opacity: 1;
visibility: visible;
}
.linkedin-badge:hover {
cursor: pointer;
}
.badge-content {
color: #333;
text-align: center;
}
.badge-content p:first-child {
font-weight: bold;
color: #0077b5;
margin-bottom: 8px;
}
.tip {
text-align: center;
color: #666;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="linkedin-badge" id="badge">
<div class="badge-content">
<p>LinkedIn 认证徽章</p>
<p>前端开发工程师</p>
</div>
</div>
<p class="tip">点击徽章可触发淡出效果，刷新页面重新加载会触发淡入</p>
<script>
window.addEventListener('DOMContentLoaded', function() {
const badge = document.getElementById('badge');
setTimeout(() => {
badge.classList.add('show');
}, 100);
badge.addEventListener('click', function() {
this.classList.remove('show');
});
});
</script>
</body>
</html>
CSS动画淡入淡出效果LinkedIn徽章transition属性修改时间：2026-07-04 13:51:29