在现代 Web 设计中，动态效果和交互式内容能够极大提升用户体验。本次案例，我们将使用 HTML + CSS + JavaScript 设计一个 动态卡片展示 页面，适用于作品集、产品电影展示或博客文章列表等场景。
项目效果预览
🔹 功能介绍
✅ 动态加载卡片（模拟从 API 获取数据）
✅ 鼠标悬停放大效果
✅ 点击按钮切换主题（深色 / 浅色模式）
✅ 响应式布局，适配不同设备
📌 最终效果：
项目文件结构
plaintext
复制
编辑
📁 dynamic-cards
│── index.html # 主页
│── styles.css # 样式表
│── script.js # 交互逻辑
编写 HTML 结构（index.html）
html
复制
编辑
JavaScript 动态卡片展示
切换主题
🔹 核心部分：
#cardContainer 负责存放动态加载的卡片内容
#toggleTheme 按钮用于切换 深色 / 浅色模式
4. 编写 CSS 样式（styles.css）
css
复制
编辑
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
margin: 0;
padding: 20px;
transition: background 0.3s, color 0.3s;
}
/* 主题切换 */
.dark-mode {
background-color: #333;
color: #f4f4f4;
}
/* 容器 */
.container {
max-width: 800px;
margin: auto;
}
/* 卡片布局 */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
/* 单个卡片 */
.card {
background: white;
padding: 15px;
width: 200px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
/* 主题按钮 */
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.dark-mode .card {
background: #444;
color: white;
}
🔹 CSS 亮点：
dark-mode 让整个页面在 深色 / 浅色 之间切换
card:hover 让卡片在悬停时 放大 + 投影变化
flex-wrap 让卡片在小屏幕下自动换行，确保响应式布局
5. 使用 JavaScript 动态加载数据（script.js）
js
复制
编辑
document.addEventListener(“DOMContentLoaded”, function () {
const cardContainer = document.getElementById(“cardContainer”);
const toggleThemeBtn = document.getElementById(“toggleTheme”);
// 模拟 API 数据
const data = [
{ title: "HTML", description: "结构化网页内容" },
{ title: "CSS", description: "美化页面样式" },
{ title: "JavaScript", description: "让网页更具交互性" },
{ title: "React", description: "构建现代 Web 应用" },
{ title: "Node.js", description: "服务器端 JavaScript" }
];
// 动态生成卡片
function renderCards() {
cardContainer.innerHTML = ""; // 清空原有内容
data.forEach(item => {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = `<h3>${item.title}</h3><p>${item.description}</p>`;
cardContainer.appendChild(card);
});
}
// 主题切换功能
toggleThemeBtn.addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
});
// 初始化渲染
renderCards();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
});
🔹 JavaScript 亮点：
DOMContentLoaded 监听页面加载完毕，自动执行 renderCards()
renderCards() 动态创建
并填充数据
toggleThemeBtn.addEventListener(“click”, …) 实现深色模式切换
6. 运行 & 效果展示
1️⃣ 运行项目：
将 index.html 直接用浏览器打开，或者用 VS Code 开启 Live Server 运行。
2️⃣ 查看动态效果：
页面自动加载 5 个卡片
悬停时卡片会放大并增加阴影
点击 “切换主题” 按钮，整个页面变为 深色模式
7. 总结与优化方向
✅ 完成功能：
动态生成卡片 ✅
主题切换 ✅
响应式布局 ✅
📌 可以继续优化：
https://www.saxww.com
增加搜索功能（允许用户搜索特定的卡片）
从 API 获取数据（可以用 fetch 动态获取内容）
动画优化（加入 GSAP 或 Animate.css 让动画更流畅）
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_26267685/article/details/145564319
