5.5 让页面更高级的效果
本节目标：了解那些让页面看起来"很贵"的常见效果，掌握每个效果对应的提示词，需要时直接让 AI 实现。
有些页面一看就很"贵"，但你说不清为什么。其实它们用了很多标准化的高级效果。老师傅说："这些效果都有名字，知道名字就能让 AI 帮你做。"
每个效果都有实时预览和对应的 AI 提示词，可以直接复制使用。
过渡效果
让元素的出现和变化不那么突兀——不是"啪"地蹦出来，而是优雅地滑进画面。
3D 翻转
3D Card Flip张
张明远
全栈工程师
5 年 Web 开发经验，擅长 React 和 Node.js，热爱开源社区。
GitHubTwitter
李
李思琪
UI/UX 设计师
专注用户体验设计，Figma 深度用户，设计系统布道者。
DribbbleBehance
王
王浩然
后端架构师
分布式系统专家，Go 和 Rust 双修，性能优化狂热者。
GitHubBlog
做一个 3D 翻转卡片，正面显示头像和名字，鼠标悬停时翻转到背面显示简介，用 CSS perspective + transform
数字滚动
Counter Animation0+
活跃用户
0.0%
可用性
0ms
响应时间
0/7
全天候支持
做一个数字滚动动画组件，数字从 0 增长到目标值，滚动到视口时触发，持续 2 秒
悬浮抬起
Hover Lift极速部署
一键部署到全球 CDN，毫秒级响应，让用户无感等待。
安全可靠
端到端加密传输，自动备份，数据安全无忧。
实时分析
内置数据看板，用户行为一目了然，驱动产品决策。
给卡片加悬浮抬起效果，hover 时向上移动 8px 并加深阴影，用 CSS transition
交错入场
Stagger Animation让网格中的卡片依次交错入场，每个延迟 0.05 秒，从透明+缩小到正常状态
打字机效果
Typewriter Effect|
从想法到上线，AI 帮你搞定每一步
给标题加打字机效果，文字逐字出现，末尾有闪烁的光标
文字揭示
Text Reveal让页面更高级
用动效传递品牌温度
做一个文字从左到右逐渐揭示的动画，用 clip-path 或 overflow hidden 实现
文字解码
Text Scramble做一个文字解码效果，文字从随机字符逐个变成正确内容，像黑客电影里的解密画面，用 requestAnimationFrame 实现
文字拆分动画
Text Split Animation创造无限可能
Vibe Coding
给标题做文字拆分动画，每个字符独立做入场动画（旋转+位移+透明度），用 GSAP SplitText 或手动拆分 span 实现
页面无缝过渡
Page Seamless TransitionPanel A
Panel B
做一个页面无缝过渡效果，两个面板堆叠，用 clip-path circle 从中心缩小退出旧页面，新页面从侧面滑入，纯 CSS 实现
动态排版艺术
Dynamic Typography Art做一个动态排版艺术效果，用 SVG textPath 让文字沿圆形路径排列，两个同心圆环反向旋转，纯 CSS animation 驱动
Lottie 矢量微动效
Lottie-style Micro-animation操作成功
做一个类 Lottie 的矢量微动效，用 SVG 实现一个打勾成功动画：先画圆圈（stroke-dashoffset），再画对勾（stroke-dashoffset），纯 CSS animation
文字路径流动
Text Path Flow做一个文字路径流动效果，用 SVG bezier path 定义曲线路径，textPath 让文字沿路径排列，用 animate 元素让 startOffset 持续变化实现流动
可变字体动画
Variable Font AnimationVariable
wght: 400
← 移动鼠标 →
做一个可变字体动画效果，鼠标水平位置控制字体粗细（font-variation-settings 的 wght 从 100 到 900），实时响应鼠标移动
SVG 路径描边绘制
SVG Path Stroke Drawing做一组 SVG 图标描边绘制动画，多个简单图标（星星、心形、闪电）依次用 stroke-dashoffset 从 0 画到完整路径，交错延迟
定制化全屏预加载
Custom Fullscreen PreloaderWelcome
内容已加载完成
做一个定制化全屏预加载效果，包含进度条和几何 Logo 动画，加载完成后用 clip-path circle 从中心向外展开揭示页面内容
按钮特效
按钮是用户点击最多的元素，一个有质感的按钮能让整个页面提升一个档次。
灯光追踪按钮
Light Trail Button移动鼠标到按钮上，观察边缘光点
做一个灯光追踪按钮，鼠标在按钮上移动时，按钮边缘有一个光点跟随鼠标移动，用 radial-gradient + mousemove 实现
填充滑动按钮
Fill Slide Button做三种填充滑动按钮：从左填充、从下填充、从中心扩展，hover 时背景色平滑滑入，纯 CSS transition 实现
双开门按钮
Split Door Button做一个双开门按钮效果，hover 时文字从中间分成上下两半向两侧滑开，露出底层不同颜色的背景
线条滑动按钮
Line Slide Button做线条滑动按钮，hover 时上方出现一条从左滑入的线，下方出现一条从右滑入的线，纯 CSS 实现
弹性按钮
Elastic Button做一个弹性按钮，点击时有弹跳缩放动画（先放大再缩小再恢复），用 CSS keyframes 实现 Q 弹效果
发光脉冲按钮
Glow Pulse Button做一个发光脉冲按钮，持续呼吸式发光，hover 时光晕增强变色，用 box-shadow + animation 实现
文字逐字变色按钮
Text Color Wave Button做文字逐字变色按钮，hover 时每个字符从左到右依次变色形成波浪效果，用 transition-delay 递增实现
磁吸按钮
Magnetic Button做一个磁吸按钮效果，鼠标靠近按钮时按钮微微向光标方向移动，离开时弹回原位，用 mousemove 事件 + transform 实现
视觉特效
纯视觉层面的点缀，让页面看起来更精致。
骨架屏
Skeleton Screen给用户列表加骨架屏，数据加载时显示灰色占位块，用 shadcn/ui 的 Skeleton 组件
毛玻璃
Frosted Glass毛玻璃弹窗
backdrop-filter: blur() 让背景模糊，配合半透明背景色，营造出磨砂质感。
给导航栏加毛玻璃效果，用 backdrop-blur-md + bg-white/70，滚动时固定在顶部
渐变边框
Gradient Border基础版
¥0
- ✓ 1 个项目
- ✓ 基础模板
- ✓ 社区支持
推荐
专业版
¥99/月
- ✓ 无限项目
- ✓ 高级模板
- ✓ 优先支持
- ✓ API 访问
企业版
联系我们
- ✓ 定制部署
- ✓ 专属顾问
- ✓ SLA 保障
- ✓ 私有化
给推荐套餐的卡片加渐变边框，从绿色到青色，用 CSS gradient border 技巧
光晕效果
Glow Effect光晕效果需要深色背景才能凸显，hover 按钮查看增强效果
给 CTA 按钮加光晕效果，用主题色的 box-shadow，hover 时光晕变大
渐变文字
Gradient Text用 AI 构建未来
Vibe Coding 新范式
🔥 热门技术给标题加渐变色效果，从绿色到青色，用 background-clip: text 实现
霓虹灯文字
Neon TextNEON
霓虹灯效果
做一个霓虹灯发光文字效果，用 text-shadow 多层叠加，加闪烁动画
涟漪效果
Ripple Effect给按钮加点击涟漪效果，从点击位置向外扩散的圆形波纹，类似 Material Design
流光边框
Animated BorderPro 功能已解锁
享受无限项目、优先支持和高级模板。流光边框用 conic-gradient 旋转实现。
给卡片加流光边框效果，渐变色沿边框旋转流动，用 conic-gradient + animation
波浪动画
Wave Animation上方内容区域
品牌色背景
下方内容区域
默认背景色
在两个区域之间加波浪形分隔线，用 SVG path 做波浪，加缓慢起伏动画
极光背景
Aurora BackgroundWelcome to the Future
用 AI 构建下一代 Web 应用，从这里开始
给首页加极光背景效果，用多个模糊渐变色块独立漂浮移动，营造北极光氛围，用 CSS filter blur + animation 实现
渐变背景流动
Animated Gradient BackgroundBuild Something Amazing
用 AI 和创造力，构建下一个改变世界的产品
给 Hero 区域加流动渐变背景，多个颜色缓慢过渡流动，用 CSS background-size + animation 实现，类似 Apple 官网风格
视频文字遮罩
Video Text MaskVIBE
流动色彩文字遮罩
做一个视频文字遮罩效果，大号文字用 background-clip: text 配合动态渐变背景模拟视频效果，文字内部显示流动的色彩
暗色模式无缝切换
Dark Mode Seamless ToggleMyApp
欢迎回来
点击右上角按钮切换主题，观察 clip-path 圆形扩展效果
今日数据
访问量 1,234 · 转化率 5.6%
做一个暗色模式无缝切换效果，点击按钮时从点击位置用 clip-path circle 向外扩展切换主题色，过渡流畅自然
动态噪点叠加
Dynamic Noise OverlayFILM GRAIN
动态胶片颗粒感
做一个动态噪点叠加效果，用 SVG feTurbulence 滤镜生成噪点，通过动画改变 seed 值实现动态胶片颗粒感
流体扭曲
Fluid DistortionFLUID
悬停查看扭曲效果
做一个流体扭曲效果，用 SVG feDisplacementMap 滤镜，鼠标悬停时动画改变 scale 值从 0 到 30，产生液态扭曲感
混合模式反色
Blend Mode InvertHello
World
Vibe
Code
做一个混合模式反色效果，一个白色圆形跟随鼠标移动，用 mix-blend-mode: difference 让经过区域颜色反转
动态色板提取
Dynamic Color Palette做一个动态色板提取效果，用 Canvas 绘制渐变预设图案，采样像素提取主要颜色，展示提取出的调色板
滚动效果
你刷 Apple 官网时，图片和文字像是在不同速度移动，有前有后——这就是滚动效果在起作用。
视差滚动
Parallax Scrolling经典视差
Parallax每层速度不同，产生深度感
固定背景
Fixed背景固定，内容滑过
↕ 滚动查看视差效果
给首页 Hero 区域加视差滚动效果，背景图片滚动速度是内容的 0.5 倍，用 GSAP ScrollTrigger 实现
滚动触发动画
Scroll-triggered Animation极速部署
一键部署到全球 CDN 节点
安全可靠
企业级安全防护体系
数据分析
实时监控与智能报表
自由定制
灵活的主题与组件系统
高性能
毫秒级响应，丝滑体验
全球化
多语言与多地域支持
易维护
模块化架构，清晰可扩展
AI 驱动
智能推荐与自动化工作流
让每个功能卡片在滚动到视口时从下方淡入，用 Motion 的 whileInView，每个卡片延迟 0.1 秒
滚动进度条
Scroll Progress Bar深入理解 Web 性能优化
在现代 Web 开发中，性能优化是一个永恒的话题。用户对页面加载速度的期望越来越高，搜索引擎也将性能作为排名的重要因素。
1. 关键渲染路径
浏览器从接收 HTML 到渲染像素的过程称为关键渲染路径。优化这个路径是提升首屏性能的关键。减少关键资源数量、缩短关键路径长度、减小关键字节数是三个核心策略。
2. 资源加载优化
合理使用预加载（preload）、预连接（preconnect）和懒加载（lazy loading）可以显著改善资源加载效率。图片懒加载尤其重要，它可以减少首屏不必要的网络请求。
3. JavaScript 优化
代码分割（Code Splitting）和树摇（Tree Shaking）是现代打包工具的标配功能。合理使用动态导入可以将首屏 JS 体积减少 40% 以上。
4. 缓存策略
HTTP 缓存、Service Worker 缓存和 CDN 缓存构成了完整的缓存体系。合理配置缓存策略可以让回访用户几乎零等待地看到页面内容。
— 全文完 —
0%
在页面顶部加一个滚动进度条，用主题色，宽度随滚动进度变化
无限滚动
Infinite Marquee🍎FruitOS
🔷DiamondDB
🌊WaveCloud
⚡FlashAPI
🎯TargetAI
🔮CrystalUI
🛡️ShieldAuth
🌿GreenStack
做一个无限滚动的品牌 Logo 展示条，从右向左匀速滚动，无缝循环
滚动固定动画
Scroll Pin + Animate用 GSAP ScrollTrigger 的 pin 功能，让某个区域在滚动时固定住，内容在里面依次切换，实现沉浸式叙事效果
横向滚动
Horizontal Scroll Section↕ 在此区域内垂直滚动，内容横向移动
做一个横向滚动展示区，用户垂直滚动时内容横向移动，用 CSS sticky + overflow 或 GSAP ScrollTrigger 实现
惯性平滑滚动
Inertia Smooth Scroll拖拽列表 — 松手后惯性滑动
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
↕ 拖拽列表，松手后观察惯性效果
做一个惯性平滑滚动效果，自定义拖拽滚动区域，追踪拖拽速度，松手后用 requestAnimationFrame 实现减速惯性滑动
画布无限缩放
Canvas Infinite Zoom↕ 滚动查看无限缩放效果
做一个画布无限缩放效果，多层嵌套框架在滚动时逐层放大，外层淡出揭示内层，产生无限缩放的视觉错觉
卡片堆叠滚动
Card Stack Scroll↕ 滚动查看卡片堆叠效果
做一个卡片堆叠滚动效果，多张卡片用 sticky 定位堆叠，滚动时新卡片从下方滑入覆盖旧卡片，旧卡片缩小变暗
景深视差模糊
Depth-of-field Parallax远景 BG
中景 MID
Depth of Field
景深视差模糊效果
前景 FG
焦点层: 中景
↕ 滚动切换焦点层，观察景深模糊
做一个景深视差模糊效果，多层元素以不同速度移动，非焦点层动态添加 filter: blur()，模拟相机景深效果
交互效果
用户动手参与的效果——拖、滑、靠近，让页面从"看"变成"玩"。
图片对比滑块
Image Comparison Slider做一个图片对比滑块组件，左右两张图片用一条可拖动的分割线分隔，拖动分割线可以对比前后效果
聚光灯效果
Spotlight / Torch Effect快速部署
安全可靠
极致性能
精美设计
模块化
全球化
移动鼠标探索隐藏内容
做一个聚光灯效果，页面是暗色的，鼠标位置产生一个圆形光圈照亮下方内容，像手电筒一样，用 radial-gradient + mousemove 实现
手风琴图片切换
Accordion Image Switch设计
开发
部署
分析
运维
做一个手风琴图片切换效果，4-5 个竖条并排，每个有渐变背景和图标标签，hover 时当前条展开其他收缩，用 CSS flex-grow + transition 实现
FAQ 折叠展开
FAQ Accordion当然！Vibe Coding 的核心理念就是用自然语言描述需求，让 AI 来写代码。你需要的是清晰的思维和好的产品感觉，而不是编程经验。
在合理的 prompt 引导下，AI 生成的代码质量相当高。关键在于你的需求描述是否清晰、是否加载了对应的 Skills。
一台电脑、Node.js 环境、一个趁手的编辑器（推荐 VS Code 或 Cursor），以及 Claude Code CLI。详见第一章环境搭建。
一点都不难。现代部署平台（Vercel、Netlify）支持一键部署，连接 GitHub 仓库后每次 push 自动更新。
做一个 FAQ 折叠展开组件，4 个问答项，点击展开答案并收起其他项，带 chevron 图标旋转动画，用 max-height transition 实现
搜索框展开
Expandable Search做一个搜索框展开效果，默认只显示搜索图标按钮，点击后平滑展开为完整搜索输入框，点击外部或按 Escape 收回，用 width transition 实现
鼠标跟随
Cursor Follow智能降噪耳机
沉浸式音频体验，40dB 主动降噪
¥1,299
将鼠标移到卡片上试试
给卡片加鼠标跟随效果，鼠标移到卡片上时根据位置微微倾斜，产生 3D 感
自定义光标互动
Custom Cursor Interaction做一个自定义光标互动效果，隐藏默认光标，用一个 div 跟随鼠标，在按钮上变大，在文字上变成竖线，在链接上变成指针圆环
悬浮媒体预览
Hover Media Preview01极光之旅 — 冰岛摄影集→
02东京霓虹 — 城市夜景→
03深海探索 — 水下世界→
04沙漠星空 — 银河延时→
05雨林秘境 — 自然纪录→
Preview
做一个悬浮媒体预览效果，文字列表项悬停时在光标附近显示浮动的渐变色块（模拟图片预览），跟随鼠标移动
3D 模型交互
3D Model Interaction前
后
右
左
上
下
拖拽旋转立方体，松手后自动旋转
做一个 3D 模型交互效果，用 CSS 3D transform 构建一个立方体（preserve-3d），支持拖拽旋转，空闲时自动旋转
物理引擎交互布局
Physics Engine Layout拖拽并抛掷小球，观察物理碰撞效果
做一个物理引擎交互布局，用 Canvas 实现多个彩色小球，有重力和弹跳效果，支持拖拽抛掷和碰撞检测
使用原则
少即是多
一个页面最多用 2-3 个高级效果。全都要 = 花里胡哨。
- 先做功能，再加效果。效果是锦上添花，不是雪中送炭
- 移动端谨慎使用。复杂动画在手机上可能卡顿
- 性能优先。如果一个效果让页面变慢，果断去掉
- 有意义的动画。每个动画都应该传达信息或引导注意力，不是为了炫技
本章总结
你现在有了一个完整的 UI/UX 工具箱：AI 设计工具帮你快速出原型，组件库提供现成的积木，动画库让页面动起来，灵感网站和风格关键词帮你跟 AI 精确沟通，高级效果让页面看起来更专业。记住老师傅的话：工具只是手段，理解用户才是核心。