自定义 CSS 与动画效果（完整图文步骤）-WP独立站学院

生成摘要

AI 生成，仅供参考

一、先摸清 Advanced 面板

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

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

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

高级（Advanced）标签：布局、动作效果、变换、背景、边框、遮罩、响应式、Custom CSS

二、入场动画（Entrance Animation）

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

🎛️ 2.1 设置方法

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

🎭 2.2 常用动画类型

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

动画类型下拉：Fade In / Slide In / Zoom In / Bounce In / Flip In……

💡 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 设置方法

选中元素 → 高级 → Motion Effects → 开启 Scrolling Effects。
勾选效果类型（可叠加），每种效果都有：
Direction/Speed：方向和速度
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 粘性定位

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

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

Sticky 设置：Bottom + Sticky On 桌面 + Effects Offset

典型应用：

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

滚动后：吸底 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 吸底。

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