第二章支线一：影之殿堂 · 阴影与过渡魔法
主线回顾
第二章：CSS秘典 · 色彩与布局的力量
剧情设定：
夜色降临，林昊在寻找“CSS秘典”的旅途中，被卷入一座黑暗禁宫——影之殿堂。这里由“影魔议会”掌控，一切光线都受操控，元素若无阴影则无法现形。
若要通关此地，林昊必须掌握控制光与影的魔法，使页面元素获得“真实感”，并用动画唤醒沉睡的守卫。
掌握光与影的本质（box-shadow & text-shadow）
林昊在石碑上发现两条古老铭文：
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 3px #333;
石碑随即浮现一道谜题：
<div class="card">
<h2>魔法卷轴h2>
<p>这是记载CSS影术的古书。p>
div>
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.2);
}
.card h2 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
✨ 解析符文：
- box-shadow: x y blur color; 表示阴影的水平位移、垂直位移、模糊半径与颜色。
- text-shadow 类似，但用于文字阴影，营造“浮雕”或“发光”效果。
林昊唤出卷轴，瞬间一座石台显现——成功为元素“赋影”。
唤醒光彩（渐变背景 · gradient）
接着，林昊踏入一间光彩幻变的大厅，墙上写着：
“掌控渐变，即可驾驭色彩流动的力量。”
body {
background: linear-gradient(135deg, #1e90ff, #87cefa);
}
他挥动魔杖，背景如流水般染上蓝色余晖。
✨ 渐变知识点：
- linear-gradient(angle, color1, color2, …)
- radial-gradient(circle, color1, color2, …)
- 可用于背景、按钮、卡片等元素打造高级感
button {
background: linear-gradient(to right, #ff7e5f, #feb47b);
border: none;
color: white;
padding: 12px 24px;
border-radius: 30px;
}
时间之律（transition 动画基础）
大厅深处，石像守卫苏醒，一道提示浮现：
“想让世界动起来？用 transition 启动时间之律。”
林昊需要为一个按钮添加缓动过渡动画：
<button class="magic-btn">点击我button>
.magic-btn {
background-color: #1e90ff;
color: white;
transition: all 0.3s ease;
}
.magic-btn:hover {
background-color: #4682b4;
transform: scale(1.1);
}
✨ transition 魔法点：
- transition: 属性 时间 曲线 延迟;
- 常用于 hover 动效：颜色变化、缩放、旋转等
- 搭配 transform 可做复杂动效，如缩放 scale()、旋转 rotate()、移动 translate()
⚔️ Boss战：影魔阿兹泽尔
阿兹泽尔现身，其形体不断变化，林昊必须使用三个魔法组合才能制服他：
.shadow-beast {
background: linear-gradient(to bottom right, #333, #111);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
transition: transform 0.6s ease;
}
.shadow-beast:hover {
transform: rotateY(180deg) scale(1.2);
}
敌人最终被冻结在一束强光中，林昊获得了「影之晶核」，正式掌握视觉表现的力量。
魔法小抄（章节总结）
| 魔法技能 | 说明 |
|---|---|
| box-shadow | 创建卡片浮动感、投影效果 |
| text-shadow | 制作文字浮雕、发光文字 |
| linear-gradient | 渐变背景、按钮、卡片 |
| transition | 实现平滑动画（与 hover 联动） |
| transform | 缩放、旋转、位移等动态视觉魔法 |
魔法试炼任务
1.为一个 .card 添加阴影与渐变背景，使其更具立体感
2. 创建一个渐变按钮，并加上 hover 动画效果
3. 设计一个带 text-shadow 的标题，营造神秘感