《给 Vibe Coding 小白的前端效果词典：80 个常见术语速查手册》-北京尧图网络

给 Vibe Coding 小白的前端效果词典80 个常见术语速查手册附 Prompt 示例核心实现✅ 为什么需要这本词典用 Vibe Coding 做前端时模糊描述如“鼠标放上去有点反应”会让 AI 输出结果偏差高达 80% 以上。精准提示的前提是你知道那个效果叫什么。本手册收录 80 个高频术语中英对照效果说明可直接复制粘贴的 Prompt CSS/JS 实现思路助你快速上手高效生成。查找指南类别范围常用关键词布局与页面结构01–12Grid,Flexbox,Bento,Masonry,Split-screen常用组件13–24Modal,Tooltip,Tabs,Accordion,Badge交互与滚动25–36Hover,Scroll,Parallax,Infinite Scroll基础动效37–48Fade,Slide,Scale,Rotate,Bounce连续展示与跟随49–60Carousel,Marquee,Cursor Trail,Follow视觉材质61–72Glassmorphism,Neumorphism,Gradient,Texture整体风格73–80Minimalist,Cyberpunk,Retro,Glassy 一、布局与页面结构01–1201 网格布局 / Grid Layout效果说明按行和列整齐排列内容支持跨行跨列卡片对齐清晰。适用场景作品集、产品列表、仪表盘。Prompt 示例把作品区改成 Grid 网格布局电脑端三列、手机端一列卡片间距统一。.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } media (max-width: 768px) { .container { grid-template-columns: 1fr; } } 提示可用grid-template-areas实现复杂区域划分如侧边栏主内容广告位。02 弹性布局 / Flexbox效果说明沿单一方向水平或垂直排列项目自动伸缩填充空间支持换行。适用场景导航栏、标签组、按钮组、响应式对齐。Prompt 示例把这排标签改成 Flex 布局间距一致放不下就换到下一行。.tag-container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } 高阶技巧justify-content: space-between可实现两端对齐align-items: center实现垂直居中。03 便当盒布局 / Bento Grid效果说明大小不一的区块拼成整齐网格视觉丰富但不失秩序感。适用场景个人主页、作品介绍页、信息概览卡。Prompt 示例把个人介绍改成 Bento Grid简介占大格技能、地点和联系方式放小格。.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap: 12px; } .item-large { grid-column: span 2; grid-row: span 2; } .item-medium { grid-column: span 1; grid-row: span 1; } 工具推荐Bento.js 可动态调整尺寸。04 瀑布流 / Masonry Layout效果说明不同高度的卡片按列紧凑排列无固定行高视觉自然流畅。适用场景图片墙、灵感收集站、博客封面图。Prompt 示例把图片收藏页改成瀑布流保留图片比例不要把所有图片裁成一样高。.masonry { column-count: 3; column-gap: 16px; } .masonry img { width: 100%; height: auto; display: block; break-inside: avoid; } 替代方案使用 vanilla-masonry JS 库。05 分屏布局 / Split-screen Layout效果说明页面左右或上下分为两部分常用于对比展示文字 vs 视觉。适用场景首页宣传、产品对比页、登录注册双面板。Prompt 示例首页做成左右分屏左边标题和按钮右边作品图手机端上下排列。.split-screen { display: flex; flex-direction: row; height: 100vh; } .split-left, .split-right { flex: 1; padding: 40px; box-sizing: border-box; } media (max-width: 768px) { .split-screen { flex-direction: column; } }06 卡片式布局 / Card Layout效果说明将图文信息封装在一张卡片内便于批量浏览与点击操作。适用场景工具推荐、文章摘要、服务介绍。Prompt 示例每个工具做成一张卡片包含图标、名称、两行简介和访问按钮。.card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s ease; } .card:hover { transform: translateY(-4px); } 加分项添加backdrop-filter: blur(8px)实现毛玻璃背景。07 首屏主视觉 / Hero Section效果说明页面最顶部的核心区域突出品牌定位与核心行动号召。适用场景官网首页、活动页、落地页。Prompt 示例首页加一个 Hero 首屏只放一句主标题、一句说明和一个开始使用按钮。.hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; padding: 0 20px; } .hero h1 { font-size: 3rem; margin-bottom: 16px; } .hero button { padding: 12px 32px; font-size: 1rem; background: white; color: #6a11cb; border: none; border-radius: 30px; cursor: pointer; transition: all 0.3s; }08 侧边栏 / Sidebar效果说明固定在页面一侧的导航或筛选面板不影响主内容流动。适用场景文档网站、后台管理、长篇文章目录。Prompt 示例文档页左侧放章节侧边栏当前章节高亮点击可以跳转。.sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100vh; background: #f8f9fa; padding: 20px 0; border-right: 1px solid #ddd; z-index: 1000; } .sidebar-item.active { background: #007bff; color: white; } 搭配position: sticky让侧边栏在滚动时保持可见。09 粘性定位 / Sticky效果说明元素在滚动过程中“粘住”在视口顶部或底部常用于导航栏。适用场景固定导航、悬浮菜单、进度条。Prompt 示例让导航栏在滚动时始终贴在顶部不消失也不移位。.navbar { position: sticky; top: 0; background: white; backdrop-filter: blur(8px); z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } 兼容性注意sticky不支持 IE 浏览器。10 滚动锚点 / Scroll Anchor效果说明点击链接后平滑跳转到页面指定位置提升用户体验。适用场景长页面导航、文档跳转。Prompt 示例点击“关于我们”跳转到该章节带平滑滚动动画。a href#about classsmooth-scroll关于我们/a.smooth-scroll { scroll-behavior: smooth; } 也可用 JS 手动控制window.scrollTo({ top: element.offsetTop, behavior: smooth })11 悬浮层 / Floating Layer效果说明非全屏弹出但能覆盖部分内容常用于快捷操作。适用场景编辑按钮、分享菜单、浮动工具栏。Prompt 示例在右下角加一个悬浮按钮点击展开更多操作。.floating-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 999; cursor: pointer; }12 响应式断点 / Responsive Breakpoints效果说明根据不同屏幕尺寸切换布局样式确保跨设备体验一致。适用场景所有现代网页设计。Prompt 示例设置三个断点手机768px、平板768–1024px、桌面1024px。/* 手机 */ media (max-width: 767px) { .container { flex-direction: column; } } /* 平板 */ media (min-width: 768px) and (max-width: 1024px) { .container { grid-template-columns: repeat(2, 1fr); } } /* 桌面 */ media (min-width: 1025px) { .container { grid-template-columns: repeat(3, 1fr); } }✅ 推荐断点标准768,1024,1280是主流选择。️ 二、常用组件13–2413 模态框 / Modal效果说明覆盖在主界面之上的弹窗用于确认、输入或展示详情。Prompt 示例点击“立即购买”弹出一个模态框包含商品信息和支付按钮。.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1001; } .modal-content { background: white; padding: 30px; border-radius: 16px; max-width: 500px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }14 工具提示 / Tooltip效果说明鼠标悬停时显示简短解释不打断用户流程。Prompt 示例在图标上加一个提示告诉用户这是“导出功能”。.tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { visibility: hidden; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.9em; white-space: nowrap; opacity: 0; transition: all 0.3s ease; z-index: 1000; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }15 标签页 / Tabs效果说明多个内容区域通过标签切换查看节省空间。Prompt 示例把“功能介绍”分成三个标签页基础、高级、定制。.tabs { display: flex; border-bottom: 1px solid #ddd; } .tab-button { padding: 12px 24px; background: none; border: none; cursor: pointer; font-size: 1rem; color: #666; } .tab-button.active { color: #007bff; border-bottom: 3px solid #007bff; } .tab-content { display: none; } .tab-content.active { display: block; }16 折叠面板 / Accordion效果说明点击展开/收起内容适合多层级信息展示。Prompt 示例将常见问题做成折叠面板点击展开答案。.accordion { border-bottom: 1px solid #eee; } .accordion-header { padding: 16px; background: #f8f9fa; cursor: pointer; font-weight: 500; display: flex; justify-content: space-between; } .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion.open .accordion-body { max-height: 200px; }17 徽章 / Badge效果说明小标签用于标记状态如新、未读、热门。Prompt 示例在通知图标上加一个红色徽章显示“3 条未读”。.badge { position: absolute; top: -6px; right: -6px; background: #e63946; color: white; font-size: 0.75em; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; }18 进度条 / Progress Bar效果说明可视化展示任务完成度。Prompt 示例在注册流程中加入一个进度条每步完成后前进一段。.progress-bar { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: #00c853; width: 60%; transition: width 0.5s ease; }19 滑块 / Slider效果说明拖动调节数值如音量、亮度、评分。Prompt 示例做一个评分滑块范围 1~5支持鼠标拖动。.slider { width: 100%; height: 6px; background: #ddd; border-radius: 3px; position: relative; } .slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: #007bff; border-radius: 50%; cursor: pointer; }20 按钮组 / Button Group效果说明多个按钮并列排列形成一组操作选项。Prompt 示例把“删除”、“编辑”、“预览”三个按钮放在一行中间有间距。.btn-group { display: flex; gap: 8px; } .btn-group button { padding: 8px 16px; border: 1px solid #ccc; background: white; border-radius: 6px; cursor: pointer; }21 表单验证 / Form Validation效果说明输入错误时给出反馈红字、图标、气泡。Prompt 示例邮箱格式不对时在输入框下方显示“请输入有效邮箱”。input.error { border-color: #e63946; } .error-message { color: #e63946; font-size: 0.85em; margin-top: 4px; }22 下拉菜单 / Dropdown效果说明点击触发隐藏选项列表常用于筛选或选择。Prompt 示例在“排序”按钮下拉出“最新”、“最热”、“价格从低到高”。.dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ddd; list-style: none; padding: 0; margin: 0; min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: all 0.3s ease; } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; }23 轮播图 / Carousel效果说明自动或手动切换多张图片/内容常见于首页轮播。Prompt 示例做一个三张图的轮播图支持左右箭头和底部小圆点导航。.carousel { position: relative; overflow: hidden; width: 100%; height: 400px; } .carousel-track { display: flex; width: 300%; transition: transform 0.5s ease; } .carousel-slide { width: 33.33%; flex-shrink: 0; } 推荐库Swiper.js、Flickity24 搜索建议 / Autocomplete效果说明输入时实时显示匹配项提升搜索效率。Prompt 示例在搜索框输入“前端”时下方弹出“前端开发”、“前端框架”等建议。.suggestions { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-top: none; max-height: 200px; overflow-y: auto; z-index: 1000; } .suggestion-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; } .suggestion-item:hover { background: #f0f0f0; }⚙️ 三、交互与滚动25–3625 悬停 / Hover效果说明鼠标靠近元素时触发样式变化是最基础的交互之一。Prompt 示例鼠标放上去时卡片放大 10%颜色变深。.card:hover { transform: scale(1.1); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }26 滚动动画 / Scroll Animation效果说明滚动时元素渐显、滑入或旋转增强叙事感。Prompt 示例滚动到某个段落时文字从右侧滑入。.fade-in { opacity: 0; transform: translateX(50px); transition: all 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateX(0); } 结合Intersection Observer实现懒加载触发。27 滚动跟随 / Scroll Follow效果说明元素随滚动移动如悬浮导航、进度条。Prompt 示例让侧边栏随着滚动始终保持在可视区域内。.sticky-sidebar { position: sticky; top: 20px; }28 滚动视差 / Parallax Scroll效果说明不同层以不同速度滚动制造深度错觉。Prompt 示例背景图滚动速度比前景慢营造立体感。.parallax-bg { background: url(bg.jpg); background-attachment: fixed; background-position: center; background-size: cover; height: 100vh; }29 无限滚动 / Infinite Scroll效果说明滚动到底部自动加载更多内容避免翻页。Prompt 示例滚动到底部时自动加载下一页数据并追加到列表末尾。const observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { loadMoreData(); } }); }); observer.observe(document.querySelector(#load-more));30 滚动进度条 / Scroll Progress Bar效果说明顶部显示当前页面滚动进度。Prompt 示例在页面顶部加一条进度条滚动时动态更新。.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #007bff; z-index: 9999; } .scroll-progress::after { content: ; display: block; width: 100%; height: 100%; background: #007bff; transform: scaleX(0); transform-origin: 0; transition: transform 0.05s linear; } 用window.scrollY和document.body.scrollHeight计算百分比。31 滚动缩放 / Scroll Zoom效果说明滚动时元素放大缩小模拟“镜头推进”效果。Prompt 示例滚动时首屏标题逐渐放大营造沉浸感。.hero-title { transform: scale(1); transition: transform 0.1s ease; } .window-scroll { transform: scale(1.1); }32 滚动淡入 / Fade on Scroll效果说明元素在滚动中逐渐显现常用于长文排版。Prompt 示例每段文字在进入视口时淡入。.fade-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; } .fade-on-scroll.visible { opacity: 1; transform: translateY(0); }33 滚动偏移 / Scroll Offset效果说明滚动目标位置前预留一段距离避免被遮挡。Prompt 示例点击导航跳转时目标元素上方留出 80px 空白。html { scroll-padding-top: 80px; }34 滚动锁定 / Scroll Lock效果说明打开模态框时禁止主页面滚动。Prompt 示例弹出模态框后背景页面不可滚动。document.body.style.overflow hidden; // 关闭时恢复document.body.style.overflow ;35 滚动回顶 / Back to Top效果说明滚动过一定距离后出现返回顶部按钮。Prompt 示例滚动超过 300px 后右下角出现“回到顶部”按钮。.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #007bff; color: white; border: none; border-radius: 50%; display: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .back-to-top.show { display: block; }36 滚动锚点联动 / Scroll Sync效果说明滚动时同步更新导航高亮状态。Prompt 示例滚动到“关于”章节时导航中的“关于”自动高亮。const sections document.querySelectorAll(section); const navLinks document.querySelectorAll(.nav-link); window.addEventListener(scroll, () { let current ; sections.forEach(section { const sectionTop section.offsetTop - 100; if (pageYOffset sectionTop) { current section.getAttribute(id); } }); navLinks.forEach(link { link.classList.remove(active); if (link.getAttribute(href) #${current}) { link.classList.add(active); } }); });

《给 Vibe Coding 小白的前端效果词典：80 个常见术语速查手册》

相关推荐

HCIE-Datacom通关经验分享 - 毕业一年网工备考心得

2S电池组均衡方案：MP2642GR-Z与PIC18F87J50实现有源均衡

微信聊天记录导出三步搞定：用开源工具留痕把本地对话完整备份下来

更多资讯

程序员转型AI大模型：机遇、陷阱与实战路线全解析

Git新手5步实操地图：从clone到push的最小闭环

面向过程与面向对象：本质是建模思维的分岔路口

Git高频指令速查手册：10个救命命令手把手教学

给AI装上“心智”：陪伴场景下的五模块状态框架

OpenCV Python人脸识别实战：从环境搭建到实时检测与识别

今日更新

Cephadm实战指南：Linux系统工程师的生产级Ceph集群部署与排障

不想再被 Token 额度卡脖子？把免费 API 接入 WorkBuddy 的完整教程

ITK中SpatialObject几何体系解析：坐标系、变换与管道集成

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？