本文教你用纯 css 实现按钮悬停时图片淡入上浮的流畅过渡效果，并通过 flexbox 精准垂直居中整个内容区域，无需 javascript 操控显隐，代码简洁、语义清晰、新手友好。
本文教你用纯 css 实现按钮悬停时图片淡入上浮的流畅过渡效果，并通过 flexbox 精准垂直居中整个内容区域，无需 javascript 操控显隐，代码简洁、语义清晰、新手友好。
要打造一个专业、有呼吸感的班级项目落地页（Landing Page），关键在于两点：视觉动效的自然性和布局结构的稳定性。你当前的 HTML 结构良好，但 CSS 中存在几个可优化的核心问题：图片切换依赖 JS 控制显隐（导致过渡失效）、.image 默认 display: none 无法参与 CSS 过渡、以及垂直居中逻辑未真正生效（.container 虽设 flex，但父容器 #header 缺少高度约束与对齐指令）。
下面是一套完整、轻量、可直接复用的解决方案：
✅ 一、用纯 CSS 实现平滑过渡（告别 JS 显隐控制）
CSS 的 transition 只能作用于可动画属性（如 opacity、transform、height），而 display 不在其中。因此，应将 .image 改为始终渲染，仅通过 opacity 和 transform 控制其“出现”效果：
.image {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
margin-top: 10px;
/* 关键：保持文档流，避免布局跳动 */
}
a:hover .image {
opacity: 1;
transform: translateY(0);
}✅ 优势：无需 JS 监听 mouseover/mouseout；过渡更顺滑；兼容性好（支持所有现代浏览器）；代码更易维护。
同时，移除 <script> 中的事件监听器——它已不再需要。
✅ 二、真正实现全屏垂直+水平居中
你已使用 flex，但需确保三层结构协同工作：
- #header 必须设 height: 100vh（✅ 已有）；
- .container 需明确 min-height: 100vh 并启用 justify-content: center（✅ 已有），但还缺 align-items: center 来垂直居中子元素；
- 每个 .line 行内按钮需保持间距一致，建议统一用 gap 替代 margin，更可控。
优化后的 CSS 片段如下：
#header {
width: 100%;
min-height: 100vh; /* 更健壮的全屏高度 */
background-color: var(--background);
display: flex; /* 让 #header 自身也成为 flex 容器 */
justify-content: center;
align-items: center; /* ✅ 关键：垂直+水平居中整个 .container */
}
.container {
display: flex;
flex-direction: column;
align-items: center; /* 子元素（.line）水平居中 */
gap: 24px; /* 替代多层 margin，更干净 */
}
.line {
display: flex;
gap: 16px; /* 按钮间横向间距 */
}
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 70px;
padding: 8px;
background: transparent;
color: var(--text);
text-decoration: none;
border: 1px solid var(--primary);
border-radius: 8px;
font-weight: 500;
transition: all 0.35s ease-in-out; /* 同时过渡背景、颜色、边框等 */
position: relative;
}
a:hover {
background: var(--text);
color: var(--secondary);
border-color: var(--accent);
height: 90px; /* 微调悬停高度，避免图片突兀上跳 */
}
.number, .name {
margin: 0;
line-height: 1.3;
}
.image img {
max-width: 100%;
height: auto;
display: block;
}✅ 三、增强体验的小技巧（可选但推荐）
- 防止图片加载闪烁：给 .image 设固定宽高或 min-height，或添加 object-fit: cover；
- 响应式适配：在小屏幕上用 flex-wrap: wrap + max-width 保证按钮不溢出；
- 无障碍优化：为图片添加 alt 属性（如 <img src="..." alt="Afonso Nabeto">），提升可访问性。
? 总结
你不需要复杂 JS 就能做出专业动效：
? 过渡靠 opacity + transform，而非 display；
? 居中靠三层 flex 协同（#header → .container → .line）；
? 结构越语义化、样式越解耦，后期维护越轻松。
现在你的 landing page 不仅“看起来更好”，更具备了可扩展性与专业度——这正是前端开发的核心思维起点。继续加油，你已经走在正确的路上！
