如果你曾想用 **电影级的 3D 演示视频** 展示你的网站或着陆页，好消息是：你不需要复杂的视频设备或传统的 **屏幕录制程序**。

在这篇博文中，我将分享一个简单、可重复的工作流，让你通过基于浏览器的工具，在几分钟内完成网站录制、添加平滑滚动并应用强大的 **3D 变换**。

---

## 你将构建什么

在完成这个过程后，你将拥有：

- 你的网站平滑、自动滚动的屏幕录制
- 电影级的 **3D 摄像机动作**（旋转、位置和缩放）
- 完美的着陆页、产品发布或社交媒体演示视频

---

## 第 1 步：打开网站和开发者工具 (DevTools)

首先，打开你要录制的网站。

然后打开浏览器的 **开发者工具**（审查元素 / 控制台）。为了方便起见，你可以 **将开发者工具脱离到独立窗口中** —— 这让你在录制时更容易控制滚动。

---

## 第 2 步：使用 Screentell 开始录制

接下来，打开：

👉 [https://screentell.com](/content/site-root.html)

进入录制页面并选择你想捕获的内容：

- **浏览器标签页**
- **窗口**
- 或者包含你网站的 **整个屏幕**

点击 **“共享”**，然后点击 **“开始录制”**。  
此时，Screentell 正在积极录制你的屏幕。与许多通用的 **屏幕录制程序** 不同，Screentell 专为轻松创建专业的产品演示而优化。

---

## 第 3 步：启用平滑自动滚动

为了获得干净、专业的滚动效果，在开发者工具的 **控制台 (Console)** 中运行以下脚本：

```javascript
(function smoothScrollDown() {
  const speed = 2;

function step() {
    const currentScroll = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const totalHeight = document.documentElement.scrollHeight;

if (currentScroll + windowHeight < totalHeight) {
      window.scrollTo(0, currentScroll + speed);
      window.requestAnimationFrame(step);
    } else {
      console.log("已到达页面底部");
    }
  }

window.requestAnimationFrame(step);
})();
```

这将在录制运行时使页面从顶部平滑滚动到底部。

> **提示：** 此脚本是可选的。如果你愿意，也可以使用 Tampermonkey 自动滚动脚本或 Chrome 滚动扩展。

---

## 第 4 步：停止录制并进入编辑器

滚动完成后，在 Screentell 中点击 **停止录制**。  
你将直接进入 **编辑界面**，奇迹就在这里发生。

---

## 第 5 步：添加 3D 变换

在编辑器时间轴中：

1. 找到 **Motion / Animation (动画)** 轨道
2. 在你想要 3D 效果的位置左键点击
3. 从菜单中选择 **Add 3D Transform (添加 3D 变换)**

现在选择 3D 变换片段的 **起点**。在主预览区，使用以下控制：

- **拖动** → 旋转
- **CMD / CTRL + 拖动** → 移动位置
- **ALT / OPTION + 拖动** → 缩放（放大或缩小）

这定义了 **初始 3D 状态**。

接下来，选择同一 3D 变换片段的 **终点**，将其调整为不同的旋转、位置或缩放。Screentell 会自动在这两个状态之间进行内插，创建平滑的电影级动作。

---

## 第 6 步：微调时机

你可以：

- 拖动整个 3D 片段在时间轴上重新定位
- 拖动其边缘以调整其 **持续时长**

这让你能够轻松控制每个章节的节奏和重点。

---

## 第 7 步：堆叠多个 3D 效果（可选）

重复同样的过程，在时间轴上添加 **多个 3D 变换片段**。  
这让你能够：

- 突出页面的不同部分
- 创建动态的摄像机运动
- 构建更具吸引力、故事驱动的演示

---

## 最终结果

一旦你熟悉了工作流，整个过程 —— **从录制到导出** —— 只需要几分钟。

结果是一个干净、现代、3D 的演示视频，瞬间让你的网站显得更加精致和专业。

👇 最终效果如下

How to Create Eye‑Catching 3D Demo Videos for Your Website or Landing page in Minutes - YouTube

[How to Create Eye‑Catching 3D Demo Videos for Your Website or Landing page in Minutes](https://www.youtube.com/watch?v=eM6IF6li4R4)

如果你正在构建着陆页、发布产品或上线新功能，这种方法是提升产品呈现效果的最快方式之一。

---

## 关于作者

本文由 **Screentell 产品与工程团队** 撰写，他们每天都在设计并使用屏幕录制工具进行产品演示、教程和开发文档制作。本指南中的见解基于浏览器端和原生视频捕捉工作流的实践经验。  
**最近更新：** 2026 年 1 月