当前位置：首页 > news >正文

第二章支线一：影之殿堂 · 阴影与过渡魔法

news 来源：原创 2025/5/31 17:31:28

主线回顾

第二章：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	缩放、旋转、位移等动态视觉魔法