🌟 纯CSS+JS实现超酷扩展卡片效果！GitHub最火项目之一

呆呆的心
194 阅读3分钟

今天我要带大家实现GitHub上最受欢迎的50个前端项目之一：Expanding Cards（扩展卡片） 。这个效果不仅视觉冲击力强，而且交互体验极佳，特别适合前端学习！

效果预览

http://127.0.0.1:5500/html5/panel/index.html

实现思路拆解

  1. HTML结构：使用容器包裹多个卡片元素
  2. CSS布局：Flex布局实现水平排列
  3. 动画效果：CSS过渡实现平滑展开/收缩
  4. 交互逻辑：JS处理点击事件切换激活状态

完整代码实现

🎨 HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expanding Cards</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <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&auto=format&fit=crop&w=1350&q=80')">
            <h3 class="qq-panel__title">探索世界</h3>
        </div>
        
        <div class="qq-panel" 
             style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')">
            <h3 class="qq-panel__title">原始森林</h3>
        </div>
        
        <div class="qq-panel" 
             style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80')">
            <h3 class="qq-panel__title">阳光海滩</h3>
        </div>
        
        <div class="qq-panel" 
             style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')">
            <h3 class="qq-panel__title">冬日城市</h3>
        </div>
        
        <div class="qq-panel" 
             style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')">
            <h3 class="qq-panel__title">云中山脉</h3>
        </div>
    </div>
    
    <script src="common.js"></script>
</body>
</html>

🎨 CSS样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    background: #2c3e50;
    font-family: 'Segoe UI', sans-serif;
}

.container {
    display: flex;
    width: 90vw;
}

.qq-panel {
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    margin: 10px;
    position: relative;
    flex: 0.5;
    background-size: cover;
    background-position: center;
    transition: all 700ms ease-in;
}

.qq-panel__title {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    opacity: 0;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.qq-panel_active {
    flex: 5;
}

.qq-panel_active .qq-panel__title {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

⚡ JavaScript交互

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");
    })
}

✨ 核心实现原理

1. Flex布局实现卡片排列

.container {
    display: flex; /* 启用Flex布局 */
    width: 90vw; /* 占据90%视口宽度 */
}

.qq-panel {
    flex: 0.5; /* 默认比例 */
}

.qq-panel_active {
    flex: 5; /* 激活状态比例 */
}

Flex布局是响应式设计的核心！flex属性决定了弹性项目的空间分配比例，数值越大占据空间越多。

2. 平滑过渡动画

.qq-panel {
    transition: all 700ms ease-in;
}

.qq-panel_active .qq-panel__title {
    transition: opacity 0.3s ease-in 0.4s;
}

transition属性实现丝滑动画：

  • 卡片尺寸变化：700ms过渡
  • 标题文字：延迟0.4s渐入效果

3. 背景图片处理

<div class="qq-panel" 
     style="background-image: url('image.jpg')">
</div>

直接在HTML中设置背景图片：

  • 保持HTML结构简洁
  • 方便动态更改图片
  • 结合CSS的background-size: cover完美填充

4. JS交互逻辑

// 点击卡片时
panel.addEventListener('click', () => {
    // 1. 移除所有卡片的激活状态
    removeActiveClasses();
    // 2. 为当前卡片添加激活状态
    panel.classList.add("qq-panel_active");
})

JavaScript只需做两件事：

  1. 移除所有卡片的激活状态
  2. 为当前点击卡片添加激活状态

💡 项目亮点

  1. 纯CSS动画：无需复杂JS库，CSS过渡实现流畅动画
  2. 响应式设计：使用视口单位(vw/vh)适配不同屏幕
  3. 性能优化：只使用CSS过渡，避免重布局
  4. 代码简洁：不足100行代码实现惊艳效果
  5. 用户体验：点击反馈明确，动画自然流畅

💎 总结

通过这个项目，我们学到了：

  • Flex布局的灵活应用 ✅
  • CSS过渡动画的实现技巧 ✅
  • JavaScript事件处理的基本原理 ✅
  • 响应式设计的核心思想 ✅

前端开发的魅力在于：用简洁的代码创造惊艳的视觉效果！  这个扩展卡片效果不仅视觉冲击力强，而且代码简洁优雅，非常适合前端学习者练手。

动手实践是最好的学习方式！尝试修改代码中的数值和颜色，观察效果变化，你会对CSS有更深的理解！💪

avatar
文章
阅读
粉丝