你是不是也刷到过那些一点击就展开、动画丝滑到爆的网页卡片效果？其实实现起来比你想象中简单得多。今天我们就用一个超有艺术感的小项目 —— Expanding Cards，来一边做一边学，顺便把 Flex 布局、动画、BEM 命名法、移动端适配这些知识串起来讲清楚。
一、HTML 怎么写才整洁？
我们用的是标准结构加上 BEM 命名法（Block-Element-Modifier），看起来专业，维护起来也舒服。
<div class="container">
<div class="qq-panel qq-panel_active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3 class="qq-panel__title">Explore The World</h3>
</div>
<div class="qq-panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3 class="qq-panel__title">Wild Forest</h3>
</div>
<div class="qq-panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
<h3 class="qq-panel__title">Sunny Beach</h3>
</div>
<div class="qq-panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
<h3 class="qq-panel__title">City on Winter</h3>
</div>
<div class="qq-panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3 class="qq-panel__title">Mountains - Clouds</h3>
</div>
</div>
qq-panel是一个“卡片块”qq-panel__title是它里面的标题元素qq-panel_active是一个“状态标识”
为什么这么命名？
为了让 HTML 和 CSS 的关系更清晰明了，也避免类名冲突，项目越大越有用。
二、CSS 布局：用 Flex 写出自适应的排版
整体居中怎么搞？
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
flex：开启弹性布局，横纵都能排justify-content: center：水平居中align-items: center：垂直居中height: 100vh：满屏显示，单位是视口高度
多张卡片横着排
.container {
display: flex;
width: 90vw;
}
每张卡片就是 .qq-panel，用 flex 默认就横着排下来了，不用管 float、不用 grid，简单粗暴还兼容性好。
三、移动端适配：你得考虑各种屏幕！
在 PC 上看着很美，但手机上一团糊怎么办？这时候我们用媒体查询加点样式优化。
@media (max-width: 768px) {
.container {
flex-direction: column;
height: auto;
}
.qq-panel {
flex: 1 !important;
margin: 10px 0;
height: 60vh;
}
}
做了什么？
- 把横向布局变成纵向：
flex-direction: column - 每张卡片占整行，不再挤在一起
- 高度调低一点，避免卡片太大滑不过来
🚀 提醒：不要只用
px，多用vw,vh,%，这些单位天生就适配各种屏幕。
四、动效设计：那种让人“哇~”的感觉怎么来？
.qq-panel {
transition: all 700ms ease-in;
}
.qq-panel__title {
opacity: 0;
}
.qq-panel_active {
flex: 5;
}
.qq-panel_active .qq-panel__title {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
- 点击卡片，
flex从 0.5 变成 5，宽度动画就来了 - 标题延时渐显，看起来更自然
transition + delay是动画里最常用的小技巧
小贴士：
transition: all虽然方便，但项目大了建议具体点写，性能更好。
五、JS 部分：点一下，切换状态
const panels = document.querySelectorAll('.qq-panel');
panels.forEach(panel => {
panel.addEventListener('click', () => {
removeActiveClasses();
panel.classList.add('qq-panel_active');
});
});
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('qq-panel_active');
});
}
你点哪个就把哪个“激活”，其他的自动关闭，核心就是加类和删类，很经典的交互逻辑。
六、总结一下今天都搞懂了什么？
✅ 用 BEM 规范写结构，清晰又整洁
✅ Flexbox 布局超好用，移动端也能轻松搞定
✅ 过渡动画 + 延迟，让体验看起来更“高级”
✅ JavaScript 模块化地控制状态，页面交互更流畅
✅ vh/vw/% + 媒体查询，让页面无论在哪个屏幕都舒服
🔚 最后一句话
前端不只是“能跑就行”，更是要“跑得美、用得爽”。这个小项目虽然简单，但里面藏着的东西不少。下次你再看到那种炫酷的交互页面时，说不定就知道它是怎么写的了 😉
