自定义 CSS 与动画效果（完整图文步骤）

一、先摸清 Advanced 面板

元素的所有「进阶能力」都藏在每个小部件/容器的第三个标签——高级（Advanced）里 🔍：

• Layout：内外边距、宽度、对齐、排序（Order）、定位（Position）、Z-Index、CSS ID/Class
• Motion Effects：入场动画、滚动效果、鼠标效果、粘性（Sticky）
• Transform：位移/旋转/缩放/倾斜（不改变文档流的轻量变形）
• Background：背景与悬停背景（含渐变、图片）
• Border：边框、圆角、阴影
• Mask：形状遮罩
• Responsive：按设备显示/隐藏
• Custom CSS：自定义 CSS（Pro）

面板设置能解决的，就别写 CSS；面板解决不了的，CSS 兜底。这是本课的分工原则。

---

二、入场动画（Entrance Animation）

元素第一次进入视口时播放的一次性动画，免费版可用 🎬。

🎛️ 2.1 设置方法

1. 选中元素 → 高级 → Motion Effects。
2. Entrance Animation 下拉选择动画。
3. 配套参数：
4. Animation Duration：时长（Fast / Normal / Slow），默认 1 秒
5. Animation Delay：延迟毫秒数

🎭 2.2 常用动画类型

• 淡入：Fade In、Fade In Up——万能，标题、正文首选
• 滑入：Slide In Left/Right/Up——卡片、图文区块
• 缩放：Zoom In——图片、产品图
• 弹跳：Bounce In——CTA 按钮（少量用）
• 翻转：Flip In X/Y——品牌展示

💡 2.3 级联技巧

同一排的三个卡片，用同一个动画 + 递增延迟，制造依次入场的节奏感：

• 卡片1：Fade In Up，延迟 0ms
• 卡片2：Fade In Up，延迟 150ms
• 卡片3：Fade In Up，延迟 300ms

⚠️ 2.4 动画纪律

• 一页 2–3 种动画封顶，再多就是视觉噪音。
• 动画是「增强」，不是「内容」——关掉动画页面信息必须依然完整。
• 手机端动画在 Motion Effects 里可按设备禁用，低端机多的受众建议关掉滚动类效果。

---

三、滚动效果（Scrolling Effects，Pro）

元素随页面滚动持续变化，做视差（Parallax）和沉浸感的核心 ✨。

🎛️ 3.1 设置方法

1. 选中元素 → 高级 → Motion Effects → 开启 Scrolling Effects。
2. 勾选效果类型（可叠加），每种效果都有：
3. Direction/Speed：方向和速度
4. Viewport：在视口什么位置区间内生效（如 20%–80%）

🌄 3.2 六种滚动效果

• Vertical Scroll：随滚动上下移动——背景图视差（速度比前景慢）
• Horizontal Scroll：随滚动左右移动——装饰元素横移
• Transparency：渐显/渐隐——Banner 文字滚动淡出
• Blur：模糊变化——背景滚动变模糊突出前景
• Rotate：旋转——装饰图标缓转
• Scale：缩放——产品图滚动放大

🖱️ 3.3 鼠标效果（Mouse Effects）

• Mouse Track：元素跟随鼠标反向/正向偏移——做 Hero 区的层次感。
• 3D Tilt：元素随鼠标倾斜——卡片炫酷，但慎用于正文区。

⚠️ 性能提醒：滚动和鼠标效果是持续计算的 JS 动画。一个页面挂太多，低端设备会卡。Hero 区用一个视差足矣，正文区保持干净。

---

四、Sticky 粘性定位

滚动时把元素钉在屏幕上 📌：

1. 选中元素 → 高级 → Motion Effects → Sticky 选 Top / Bottom。
2. Sticky On：选生效的设备。
3. Effects Offset：滚动多少像素后进入「粘性效果态」（配合 CSS 做变形）。

典型应用：

• 吸顶页眉
• 吸顶 CTA 条：滚动后底部出现「立即咨询」条

– 长页面的侧边栏目录（配合 Table of Contents 部件）

---

五、自定义 CSS（Pro）

面板选项再全，也有覆盖不到的场景。Elementor 的自定义 CSS 入口有三层 📝：

• 元素级：选中元素 → 高级 → Custom CSS，只作用于该元素
• 页面级：页面设置 → 自定义 CSS，作用于该页面
• 站点级：Site Settings → Custom CSS，作用于全站

🔑 5.1 关键语法：selector

元素级 CSS 里，selector 代表当前元素本身：

/* 当前按钮悬停时放大 */
selector:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* 当前容器里的所有链接 */
selector a {
    text-decoration: none;
}

🛠️ 5.2 五个实战片段

1. 粘性页眉滚动后缩小变实底（配合 Sticky 的 Effects Offset）：

selector.elementor-sticky--effects {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transition: all 0.3s ease;
}

2. 图片悬停微放大：

selector img {
    transition: transform 0.4s ease;
}
selector:hover img {
    transform: scale(1.06);
}

3. 隐藏横向溢出（修复手机端横向滚动条）：

body {
    overflow-x: hidden;
}

4. 自定义下划线强调文字：

selector .elementor-heading-title {
    background: linear-gradient(transparent 60%, rgba(13,110,253,0.25) 60%);
}

5. 表格斑马纹：

selector table tr:nth-child(even) {
    background: #f7f8fa;
}

⚠️ 5.3 写 CSS 的纪律

• 优先用面板设置，CSS 只补缺口——CSS 越多，维护和响应式适配越累。
• 给元素命名 CSS Class（高级 → Layout → CSS Classes）再写规则，比重度嵌套选择器稳。
• 改动后清缓存再看效果（Elementor → 工具 → 重新生成 CSS + 缓存插件）。
• 别忘了写响应式：用 @media (max-width: 767px) 单独处理手机端。

---

六、实战：做一个有动效的 Hero 区

🎯 目标：Banner 背景视差 + 标题按钮级联入场 + CTA 吸底。

1. 背景视差：Hero 容器 → 样式 → 背景图；高级 → Motion Effects → Scrolling Effects → Vertical Scroll，方向 Up，速度 4。
2. 标题入场：主标题 → Entrance Animation Fade In Up，延迟 0ms。
3. 副标题入场：Fade In Up，延迟 200ms。
4. 按钮入场：Fade In Up，延迟 400ms + 悬停放大 CSS（5.2 片段 1）。
5. 吸底 CTA：底部条容器 → Sticky 选 Bottom，Sticky On 只勾桌面。

6. 切手机视图：禁用滚动效果，检查动画节奏。

✅ 前台滚动验证：背景缓慢移动、文字按钮依次浮现、底部条跟随。这套组合是营销页 Hero 的标准打法。

---

七、常见问题排查

⛔ 7.1 动画在前台不播放

• 编辑器里动画默认只预览一次，前台刷新才看到真实效果。
• 缓存插件压缩/延迟了动画 JS：排除 Elementor 前端脚本。
• 访客设备开了「减少动态效果」（系统级无障碍设置）——这是正常降级。

⛔ 7.2 自定义 CSS 写了没效果

按序排查：

1. 选择器写错：用浏览器开发者工具检查目标元素的实际类名。
2. 优先级不够：被主题或其他 CSS 覆盖，加 !important 或提高选择器权重。
3. 缓存：重新生成 CSS + 清缓存插件。

4. 写错了层级：元素级 CSS 里忘写 selector。

⛔ 7.3 滚动效果导致页面抖动

• 多个元素同时挂滚动效果互相干扰：减少数量。
• 视差背景图在 iOS Safari 上表现怪异是已知限制：移动端关闭滚动效果。

⛔ 7.4 Sticky 元素遮挡内容或失效

• 遮挡：给相邻元素留空间，或用 Effects Offset 延迟进入。
• 失效：父容器有 overflow: hidden 时 Sticky 会失效——检查祖先容器的溢出设置。

⛔ 7.5 手机端动画让页面卡顿

Motion Effects 里把滚动/鼠标效果在移动设备上禁用；入场动画保留淡入类轻量的即可。