这个页面用到了哪些技术？
思否 问答 已采纳 👍 5 含 AI 优化版
问题
这个页面用到了哪些技术？
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
提问者看到一个效果不错的页面，想知道它具体使用了哪些前端技术（动画效果、插件库等）来实现。
涉及技术
CSS3、浏览器开发者工具、第三方插件排查方法
期望结果
学会如何借助浏览器开发者工具反推一个页面用到的技术方案，而不仅仅是得到这个页面的答案。
回答
原始回答
打开看控制台呀，动画是css3做的 transform: translate3d() rotate;
今天好像截图不好用，那就不贴图片了。
这种东西肯定是插件嘛。这还用想，打开source，network看看资源，然后看看特别的class类名。发现了fliphtml5这么个东西，百度一下
传送门
AI 优化 · 回答整理
解答思路
分析一个页面用了哪些技术，最直接的方式就是打开浏览器开发者工具，从 Console、Sources、Network 等面板入手排查，动画效果和第三方插件基本都能通过这种方式定位到。
详细说明
- 动画效果：这个页面的动画是用 CSS3 实现的，核心用到了
transform: translate3d()和rotate等变换属性，在开发者工具的 Elements/Computed 面板里可以直接看到应用在元素上的样式。 - 排查思路：遇到“是不是用了某个插件”的疑问时，可以打开 Sources 面板看加载了哪些脚本文件，打开 Network 面板看请求的资源列表，同时观察页面元素上一些特别的 class 类名（很多插件会在类名里带上自己的标识）。
- 定位结果：通过上述方式，作者发现页面用到了一个叫
fliphtml5的翻页效果插件，进一步搜索即可了解这个插件的用法和文档。
小结
判断一个页面用了什么技术，不必猜测，善用浏览器开发者工具的 Elements（看样式）、Sources（看脚本）、Network（看资源请求）三个面板，配合观察特征化的 class 命名，基本都能定位到具体的实现方式或所用插件。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault