《50天挑战GitHub最火项目：这个卡片展开效果让千万程序员直呼惊艳！》

今天起，我将带你开启一场 史诗级前端挑战：用50天时间，手把手实现GitHub上最热门的50个项目！第一天我们就从这个让无数程序员惊艳的动态卡片展开效果开始（Star 8.5k+），学会它，你的作品集瞬间提升Level！

---

🌟 效果预览

当点击不同卡片时，会呈现丝滑的展开/收缩动画：

1. 默认显示5张并列卡片
2. 点击后当前卡片扩展展示详情
3. 其他卡片自动收缩
4. 标题文字渐入动画

在线体验：codepen.io/yourpen (替换为你的演示链接)

---

🔥 核心技术拆解

一、HTML结构 - BEM命名规范

<div class="container">
  <div class="panel panel_active" 
       style="background-image:url('mountain.jpg')">
    <h3 class="panel__title">探索世界</h3>
  </div>
  <!-- 4个相同结构的panel -->
</div>

• 使用BEM命名法：block__element--modifier
• 内联背景图实现差异化卡片内容
• panel_active类控制激活状态

二、CSS魔法 - 弹性布局核心

/* 关键代码 */
body {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 视口高度 */
}

.container {
  display: flex;
  width: 90vw; /* 视口宽度 */
}

.panel {
  flex: 0.5; /* 未激活状态宽度 */
  transition: all 700ms ease-in;
}

.panel_active {
  flex: 5; /* 激活状态扩展5倍 */
}

.panel__title {
  opacity: 0;
  transition: opacity 0.3s ease-in 0.4s; /* 延迟出现 */
}

.panel_active .panel__title {
  opacity: 1; /* 激活时显示标题 */
}

布局精要：

1. 100vh + flex实现全屏居中
2. flex:0.5与flex:5制造伸缩差异
3. transition实现平滑动画
4. 嵌套过渡实现文字延迟显现

三、JS交互 - 状态切换逻辑

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => {
  panel.addEventListener('click', () => {
    removeActiveClasses();
    panel.classList.add("panel_active");
  })
});

function removeActiveClasses() {
  panels.forEach(panel => {
    panel.classList.remove('panel_active');
  });
}

• 事件委托实现点击响应
• 先移除所有激活状态再添加当前
• 通过classList动态切换样式

---

💡 四大核心知识点

1. 视口单位应用

   • vh：基于屏幕高度的响应式设计
   • vw：实现容器宽度自适应

2. Flex弹性布局

   display: flex;
   align-items: center;
   justify-content: center;
   

   • 三行代码搞定居中布局
   • 子元素flex属性控制伸缩比例

3. CSS过渡动画

   • transition: all 700ms ease-in 属性动画
   • transition-delay实现文字延迟出现

4. BEM命名规范

   • .block__element 提高样式可读性
   • .block--modifier 状态管理更清晰

---

🚀 性能优化建议

1. 添加will-change: transform提升动画性能
2. 背景图使用background-size: cover保持比例
3. 移动端增加touch事件支持
4. 添加focus-visible支持键盘操作

.panel {
  will-change: flex; /* 提示浏览器提前优化 */
  background-size: cover;
  background-position: center;
}