前言：你是否还在为写一堆重复的 CSS 而头疼？是否羡慕别人家的网站动画丝滑如德芙？今天，我就带你用 Stylus 这门"CSS 界的 Python"，搭配 Flex 弹性布局 和 JavaScript 事件监听，三分钟打造一个媲美花瓣网的全屏交互动画页面！全程无废话，代码可复制，新手友好，包教包会！
🚀 效果预览：点击即变，丝滑到飞起！
想象一下：5 张高清背景图横向排列，当你点击其中一张，它瞬间放大占据大部分空间，文字缓缓浮现，其他图片自动收缩。整个过程流畅自然，就像被施了魔法！
👉 这就是我们要实现的效果！
(此处可替换为实际效果图链接)
🧩 技术栈揭秘：Stylus 是什么？为什么这么香？
❓ 传统 CSS 的痛点
- 写
margin: 0; padding: 0;写到手抽筋？ - 颜色、尺寸改一处，十处要跟着改？
- 媒体查询嵌套复杂，晕头转向？
✨ Stylus：CSS 的"超级外挂"
Stylus 是一门 CSS 预处理器，它让你用更简洁、更像编程语言的方式写 CSS。
它有多爽？看个对比：
scss
stylus
编辑
// Stylus - 简洁优雅，支持嵌套
.container
display flex
.panel
width 100px
&:hover
width 200px
css
css
编辑
/* 编译后 - 浏览器能看懂的标准 CSS */
.container {
display: flex;
}
.container .panel {
width: 100px;
}
.container .panel:hover {
width: 200px;
}优势拉满：
- ✅ 无需花括号和分号（可选）
- ✅ 天然支持嵌套，结构清晰
- ✅ 支持 变量、函数、混合（mixins） ，复用性爆炸
- ✅ 自动添加浏览器前缀（需配置）
💡 注意：浏览器不能直接运行 Stylus，需要编译成 CSS。别担心，超简单！
🛠 准备工作：安装 & 编译
-
安装 Node.js（确保有 npm）
-
全局安装 Stylus
bash
编辑
npm install -g stylus -
编译命令
bash
bash
编辑
# 一次性编译
stylus style.styl -o style.css
# 实时监听，边写边编译（推荐！）
stylus style.styl -o style.css -w从此告别手动刷新，修改 .styl 文件，.css 自动更新！
🎨 核心代码解析：三步打造交互动画
第一步：HTML 结构 ------ 搭好舞台
xml
html
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylus + Flex 动效实战</title>
<!-- 引入编译后的 CSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://images.unsplash.com/...')">
<h3>Explore The World</h3>
</div>
<!-- 其他4个 panel... -->
</div>
<!-- 引入 JS -->
<script src="./common.js"></script>
</body>
</html>📌 关键点：每个
.panel用style内联设置背景图，.active类标记当前展开项。
第二步：Stylus 样式 ------ 注入灵魂
scss
stylus
编辑
// style.styl
*
margin 0
padding 0
body
display flex
flex-direction row
justify-content center
align-items center // 修正：align-content → align-items
height 100vh
overflow hidden
.container
display flex
width 90vw
.panel
height 80vh
flex 0.5 // 默认占比小
border-radius 50px
color #fff
cursor pointer
margin 10px
position relative
background-size cover
background-position center
background-repeat no-repeat
transition all 700ms ease-in // 所有属性变化都加动画
h3
font-size 24px
position absolute
left 20px
bottom 20px
margin 0
opacity 0 // 初始隐藏
transition opacity 300ms ease-in 400ms // 延迟出现
&.active // 嵌套语法：.panel.active
flex 5 // 点击后占比变大
h3
opacity 1 // 文字淡入🔍 解析：
flex: 0.5vsflex: 5：比例决定大小，5 / (0.5*4 + 5) ≈ 71% 宽度！transition：动画核心！all 700ms ease-in让缩放丝滑，opacity延迟出现更有层次感。&.active：&代表父选择器，等同于.panel.active。 如果.panel不设置position: relative，h3会向上寻找最近的 "已定位祖先"（如果都没有，就》》以body为基准），导致h3可能跑到面板外部，无法正确显示在面板内。 所以，这里的relative不是为了让.panel自身 "定位到某处"，而是为了让h3能 "相对于.panel内部定位"。
第三步：JavaScript 交互 ------ 点亮生命
javascript
js
编辑
// common.js
const panels = document.querySelectorAll('.panel');
panels.forEach(function(panel) {
panel.addEventListener('click', function() {
// 1. 移除之前激活的 panel
const curActive = document.querySelector('.active');
if (curActive) {
curActive.classList.remove('active');
}
// 2. 给当前点击的 panel 添加 active
panel.classList.add('active');
});
});💡 原理：通过动态切换
class，触发 CSS 中定义的transition动画，实现"状态驱动 UI"。
📱 响应式适配：手机端也要美美的！
在小屏幕（≤480px）上，5 张图太挤？我们让它只显示前三张！
css
stylus
编辑
@media (max-width: 480px)
.container
width 100vw
.panel:nth-child(4),
.panel:nth-child(5)
display none✅ 修复了原文中的两个致命错误：
width 100vw→ 补上冒号width: 100vw- 选择器用逗号
,分隔，表示"或"的关系
🎉 最终成果
现在，打开你的网页：
- 默认第一张图展开，其余收缩
- 点击任意一张，它立即"膨胀"，文字优雅浮现
- 在手机上，只显示前三张，布局更合理
整个项目仅 1 个 HTML + 1 个 Stylus + 1 个 JS，代码量少，逻辑清晰，维护方便！
💡 总结与升华
| 技术 | 作用 |
|---|---|
| Stylus | 让 CSS 更像编程，提升开发效率 |
| Flex 布局 | 移动端布局王者，轻松实现弹性伸缩 |
| transition | 低成本实现流畅动画 |
| classList | JS 控制 DOM 状态的核心 |
🌟 关键思想：用 CSS 控制样式和动画，用 JS 控制状态切换。这才是现代前端的最佳实践！
🔗 源码下载
欢迎 Star ⭐ 和 Fork！
📣 互动时间
你觉得这个动效还可以怎么优化？比如：
- 加个渐变蒙版让文字更易读？
- 点击缩小的图片时，自动滚动到视图中央？
评论区留下你的想法，我们一起进化！
代码