最近刷到一个梗叫“肺雾正男帅不过三秒”。这句话看似是拿来调侃角色的但放在前端页面里你会发现很多交互组件天生就是“帅不过三秒”的设定提示条弹出来三秒后自动消失卡片帅帅地入场后三秒自动翻转露馅按钮点完之后进入三秒倒计时禁用状态。这些场景在业务开发里实在太常见了而且每一次出现背后都牵扯到定时器管理、动画触发、状态切换这些前端基本功。本文将用原生 HTML CSS JavaScript 实现三个可复用的“限时动效”组件Toast 自动消失提示、3D 翻转卡片、倒计时防重复提交按钮。每个组件都会给出完整可运行的 HTML 文件并逐一解释关键原理和容易踩的坑。适合有一定 HTML/CSS 基础、想系统掌握前端动效与定时器用法的开发者阅读。1. 背景与核心概念1.1 什么是“帅不过三秒”动效“帅不过三秒”的交互本质上是时间驱动的反馈行为。普通交互是用户点了一下按钮页面立刻给出反馈比如点击弹窗、点击展开菜单。但“限时动效”不一样它有一个明确的时间线元素出现后经过若干秒自动执行下一步动作。这个“下一步动作”可能是消失、翻转、禁用、跳转也可能是更新文字内容。这种交互背后其实是一套“延迟触发”逻辑前端实现它主要依赖三类技术CSS 动画负责元素的状态过渡、入场动画、翻转效果。JavaScript 定时器负责“多少秒之后做什么”也就是 setTimeout 和 setInterval。DOM 事件监听负责捕获动画结束、过渡结束这类异步信号从而继续执行后续逻辑。掌握这三样东西你就能写出大量业务中用得到的限时组件。1.2 本文涉及的三个典型场景文章规划了三个实战每一个都对应一类非常常见的业务需求Toast 自动消失提示登录成功、保存成功、操作失败等场景中页面顶部弹出一条轻提示三秒后自动消失。这是“帅不过三秒”最典型的例子也是组件化程度最高的场景之一。3D 翻转卡片活动页面、抽奖页面、打卡打卡页面中卡片以动画入场展示完正面内容后自动翻转显示背面信息或结果。这种效果看似花哨但原理并不复杂。倒计时按钮发送短信验证码、提交订单、领取奖励时按钮点击后进入倒计时期间禁止再次点击。这是防重复提交最常用的前端手段。这三个场景覆盖了自动消失、自动翻转、自动禁用三类常见动效学完之后你会发现很多复杂交互都可以拆成这三种基础模型的组合。1.3 需要掌握的基础知识本文不会引入任何前端框架全部代码基于原生 HTML、CSS、JavaScript。你需要具备以下基础会写基本的 HTML 标签知道div、button、span的用法。了解 CSS 选择器和常见样式属性知道类名切换的基本思路。了解 JavaScript 的变量、函数、事件监听、classList操作。如果你还没有框架经验完全不影响阅读。反而建议先通过原生实现把这套逻辑吃透后面迁移到 Vue、React 时会轻松很多。2. 环境准备与项目结构2.1 运行环境说明考虑到不少读者环境不一样这里不强制要求安装 Node.js、webpack 或任何构建工具。你只需要满足以下条件任意现代浏览器推荐 Chrome、Edge、Firefox 或 Safari。一个文本编辑器推荐 VS Code。一个可以保存.html文件的目录。代码中会用到requestAnimationFrame、addEventListener的{ once: true }参数、CSS 3D transform 属性这些都是现代浏览器已经稳定支持的 API不需要额外配置。本文不会编造具体依赖版本因为整套实战完全不依赖第三方库。2.2 项目文件结构建议新建一个目录命名为time-limited-effects然后按下面的结构创建文件time-limited-effects/ ├── toast.html # 实战一Toast 自动消失提示 ├── flip-card.html # 实战二3D 翻转卡片 ├── countdown-btn.html # 实战三倒计时按钮 └── demo.html # 综合 Demo三个组件合并到同一个页面每个 HTML 文件都是完整的、可以直接用浏览器打开运行的单文件页面。CSS 和 JavaScript 以内嵌方式写在style和script标签中方便你在本地快速验证。如果你只是想快速试验也可以先只创建一个index.html随着文章进度逐步添加代码。下面我们先把核心概念弄清楚再进入实战。3. 核心概念拆解CSS 动画与 JavaScript 定时器3.1 transition 与 animationtransition和animation是 CSS 中实现动效的两种主要方式很多初学者容易混淆这里先做一个区分。transition表示过渡它只能在元素状态发生变化时触发。比如鼠标悬停时改变背景色、元素类名变化时改变透明度。过渡的触发需要满足两个条件属性值发生变化并且该属性在元素上声明了transition。.box { width: 100px; height: 100px; background: #1e9fff; transition: transform 0.3s ease, opacity 0.3s ease; } .box:hover { transform: scale(1.2); opacity: 0.8; }上面的代码里当鼠标悬停在.box上时transform和opacity会以 0.3 秒的时长平滑变化。这里需要特别注意transition不会自动执行必须有一个起点和一个终点状态。animation则表示动画它通过keyframes关键帧来定义完整动画过程可以不依赖用户操作自动播放也可以设置循环、反向播放、结束后保持终态等行为。keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .box { animation: fadeInUp 0.6s ease both; }both是填充模式中的一种它表示动画在开始之前应用第一帧状态在结束之后保持最后一帧状态。这样元素不会在动画还没开始的时候“闪”一下原始样式也不会在动画结束后突然回到默认状态非常适合入场动画场景。在“帅不过三秒”系列组件中我的分配思路是这样的需要自动播放、只在页面加载时执行一次的入场动效优先使用animation。需要配合 JavaScript 动态控制、并且要反复切换状态的动效优先使用transition。比如翻转卡片入场动画用animation翻转过程用transition两者各司其职。3.2 setTimeout 与 setIntervalsetTimeout用于在指定时间后执行一次回调setInterval用于每隔一段时间重复执行回调。它们都是浏览器提供的全局方法是前端定时功能的基础。// 3 秒后执行一次 const timer1 setTimeout(() { console.log(3 秒后执行一次); }, 3000); // 立即清除回调不会执行 clearTimeout(timer1); // 每 1 秒执行一次 const timer2 setInterval(() { console.log(每秒执行一次); }, 1000); // 清除定时器 clearInterval(timer2);setTimeout和setInterval都会返回一个定时器 ID。很多人以为这个返回值是数字或者对象其实在浏览器中它是一个正整数。清除的时候必须把返回的 ID 传给clearTimeout或clearInterval这样浏览器才知道你要取消哪一个定时任务。这里有个常见的坑如果不清除定时器回调函数会在满足条件后继续执行。尤其是setInterval它会一直运行下去即使你已经在页面上看不到对应的组件了它依然在内存中执行这会造成无可挽回的性能浪费。另外要明确一点定时器并不精确。JavaScript 是单线程语言定时器回调只能等主线程空闲时才能执行。如果主线程上有大量同步计算或者浏览器标签页切换到后台定时器会被延迟甚至节流。对于秒级倒计时这种场景如果要求特别严格不能只用setInterval做次数递减而是应该结合时间戳来校准。第 8 章会专门讲这个问题。3.3 动画结束事件CSS 动画和过渡结束后浏览器会触发对应的事件方便 JavaScript 做后续处理。transitionendCSS 过渡结束时触发。animationendCSS 动画结束时触发。先看一个简单的transitionend示例const box document.querySelector(.box); box.addEventListener(transitionend, function (event) { console.log(过渡结束的属性, event.propertyName); }); box.classList.add(show);当.show类被添加后transition开始执行执行完成后transitionend事件触发。这个事件对象上有一个propertyName属性表示哪个 CSS 属性完成了过渡。如果元素同时有多个属性在过渡transitionend会触发多次所以判断propertyName很重要。使用addEventListener时还可以传入{ once: true }选项表示监听器只执行一次就自动移除。这在“动画结束之后只做一次移除操作”的场景里非常方便可以减少手动移除监听器的代码。box.addEventListener(transitionend, function () { box.remove(); }, { once: true });不过要注意transitionend事件在某些情况下不会触发比如过渡还没结束元素就被移除了或者属性值没有发生实际变化。因此在关键业务中不要完全依赖动画结束事件来做兜底逻辑最好同时配合setTimeout作为最后一道保护。4. 实战一3 秒自动消失的 Toast 提示条4.1 需求设计Toast 提示条是很多管理后台、移动端 H5 里都会用到的组件。它的交互逻辑很清晰用户点击按钮或触发某个事件后页面顶部出现一条提示。提示条以淡入加上轻微下移的动画出现。停留 3 秒后提示条以淡出动画消失。提示条消失后必须从 DOM 中移除不能留一堆隐藏节点占用内存。这个需求看似简单但如果处理不好会出现两个问题没有淡入效果元素像是突然出现又突然消失体验很差。Toast 节点移除不及时多次点击后页面 DOM 里堆积了大量隐藏节点。下面来看完整的实现代码。4.2 完整代码toast.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleToast 自动消失提示/title style body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; display: flex; justify-content: center; padding-top: 100px; margin: 0; } .toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 9999; } .toast { background: rgba(0, 0, 0, 0.85); color: #ffffff; padding: 12px 20px; border-radius: 8px; font-size: 14px; line-height: 1.5; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; white-space: nowrap; } .toast.show { opacity: 1; transform: translateY(0); } .trigger-btn { padding: 10px 24px; font-size: 14px; color: #1e9fff; background: #ffffff; border: 1px solid #1e9fff; border-radius: 6px; cursor: pointer; transition: background 0.2s ease; } .trigger-btn:hover { background: #e8f4ff; } /style /head body button idshowToastBtn classtrigger-btn点击弹出提示/button div idtoastContainer classtoast-container/div script const container document.getElementById(toastContainer); const showToastBtn document.getElementById(showToastBtn); function showToast(message, duration 3000) { const toast document.createElement(div); toast.className toast; toast.textContent message; container.appendChild(toast); // 先让浏览器渲染初始样式再添加 .show 触发过渡 requestAnimationFrame(() { toast.classList.add(show); }); // 停留 duration 毫秒后开始消失 setTimeout(() { toast.classList.remove(show); toast.addEventListener( transitionend, () { toast.remove(); }, { once: true } ); }, duration); } showToastBtn.addEventListener(click, () { showToast(这条提示 3 秒后会自动消失); }); /script /body /html4.3 关键代码解读上面的代码里最关键的是requestAnimationFrame的使用。很多初学者在创建元素后直接加类名会发现自己写的transition没有生效。原因很简单当元素刚插入 DOM 时浏览器还没有完成这一帧的样式计算此时立即添加.show类浏览器看到的初始状态就已经是最终状态所以不会触发过渡。解决办法是在插入元素后用requestAnimationFrame把类名添加放到下一帧执行requestAnimationFrame(() { toast.classList.add(show); });requestAnimationFrame的回调会在浏览器下一次重绘之前执行这时候元素已经完成初始渲染添加show类就能正常触发过渡。消失部分的逻辑也值得注意。我先通过setTimeout等待 3 秒然后移除show类让元素执行淡出动画。淡出结束后transitionend事件触发这时代码才真正把 DOM 节点移除。这里使用{ once: true }可以保证只监听一次避免事件重复执行。如果你希望一组 Toast 是堆叠的上面的代码已经可以实现因为容器是flex-direction: column每次插入的新节点会排在下面。如果你希望只显示最新一条可以在showToast开头先container.innerHTML 清空旧节点。4.4 运行与验证用浏览器打开toast.html你会在页面中间看到一个按钮。点击按钮后页面顶部出现一条深色底色的提示条它以淡入和轻微下移动画出现。3 秒后提示条淡出并消失。打开开发者工具的 Elements 面板点击按钮后观察#toastContainer。你会看到.toast节点被创建并插入容器3 秒后节点被移除不会残留多余 DOM。这验证了代码中的清理逻辑是正确的。5. 实战二3 秒后自动翻转的卡片5.1 需求设计第二个实战做一个 3D 翻转卡片。它的设计逻辑如下页面加载后卡片从下方淡入出现。3 秒后卡片自动绕 Y 轴翻转 180 度露出背面。翻转后用户还可以通过按钮手动切换正反面。这个效果经常用在打卡、抽奖、翻牌、每日任务等场景。比如正面写“今日任务”3 秒后自动翻到背面显示“已完成”或者正面是一个帅气的活动头图3 秒后翻到背面展示规则。实现翻转效果需要用到 CSS 3D 变换有三个属性必须理解perspective、transform-style、backface-visibility。perspective是透视距离它决定了 3D 效果的视觉深度。没有它元素旋转看起来就像被压扁的平面。transform-style: preserve-3d让父元素保留子元素的 3D 位置而不是把它们压平到同一个平面。backface-visibility: hidden让元素的背面不可见。当元素旋转 180 度后背面朝用户时就不会显示原来的正面内容。5.2 完整代码flip-card.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title3 秒后自动翻转卡片/title style body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; display: flex; flex-direction: column; align-items: center; padding-top: 60px; margin: 0; } .scene { width: 260px; height: 340px; perspective: 800px; margin-bottom: 30px; animation: fadeInUp 0.6s ease both; } .card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s ease; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .card.flipped { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; inset: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; color: #ffffff; } .card-front { background: linear-gradient(135deg, #667eea, #764ba2); } .card-back { background: linear-gradient(135deg, #f093fb, #f5576c); transform: rotateY(180deg); } .card-front h2, .card-back h2 { margin: 0 0 8px 0; } .card-front p, .card-back p { margin: 0; font-size: 14px; opacity: 0.9; } .flip-btn { padding: 10px 24px; font-size: 14px; color: #ffffff; background: #764ba2; border: none; border-radius: 6px; cursor: pointer; } .flip-btn:hover { opacity: 0.9; } keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /style /head body div classscene div classcard idautoFlipCard div classcard-front h2帅不帅/h2 p3 秒后见分晓/p /div div classcard-back h2帅不过三秒/h2 p翻车了…/p /div /div /div button idflipBtn classflip-btn点击翻转/button script const card document.getElementById(autoFlipCard); const flipBtn document.getElementById(flipBtn); // 3 秒后自动翻转到背面 setTimeout(() { card.classList.add(flipped); }, 3000); // 按钮手动切换正反面 flipBtn.addEventListener(click, () { card.classList.toggle(flipped); }); /script /body /html5.3 关键代码解读这套代码里有一个容易踩的坑入场动画不要和翻转动画写在同一个元素上。我特意把入场动画fadeInUp写在.scene上而翻转用的transition写在.card上。为什么这么分开因为animation和transition都会控制transform属性。如果两者同时作用在同一个元素上入场动画执行期间你可能看到扭曲、跳变动画结束后transform状态也很难控制。把动画放在父容器.scene上翻转放在子元素.card上两者互不干扰。入场动画 0.6 秒播放完毕both填充模式让卡片保持最终位置3 秒后子元素开始旋转视觉上依然能看到完整的 3D 效果。再看.card-back的transform: rotateY(180deg)。这一步很容易遗漏。如果背面元素没有预先旋转 180 度那么当.card整体旋转 180 度后背面元素的正面仍然面向卡片内部用户会看到背面内容被镜像显示或者因backface-visibility: hidden而完全看不到任何内容。.card-front和.card-back都设置了backface-visibility: hidden这样两个面里始终只有一个面能被看到不会出现正反两面同时透出来的情况。5.4 运行与验证打开flip-card.html页面加载时卡片从下方淡入。3 秒后卡片自动绕 Y 轴翻转 180 度正面“帅不帅”消失背面“帅不过三秒”出现。此时点击“点击翻转”按钮卡片会翻回正面再点击一次又翻到背面。这个过程中卡片的两个面切换非常平滑没有背面内容镜像、闪烁等异常。你可以在开发者工具的 Console 里执行下面这行代码验证定时器是否在页面加载时已经注册document.getElementById(autoFlipCard).className;页面打开 3 秒后再次执行你会发现card的类名发生了变化说明定时器生效了。6. 实战三3 秒倒计时按钮6.1 需求设计第三个实战是倒计时按钮它在工程中的价值最大。很多网站都有“获取验证码”“确认支付”“提交订单”这类按钮如果用户手抖点了两次就会发出两次请求轻则数据重复重则产生费用问题。前端倒计时按钮的核心思路是按钮点击后进入不可用状态同时显示剩余秒数倒计时结束后恢复到可点击状态。这种“帅不过三秒”的按钮本质上是给用户一个无法绕开的操作保护。6.2 完整代码countdown-btn.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title3 秒倒计时按钮/title style body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; display: flex; justify-content: center; padding-top: 100px; margin: 0; } .countdown-btn { min-width: 160px; padding: 12px 24px; font-size: 14px; color: #ffffff; background: #1e9fff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s ease; } .countdown-btn:hover:not(:disabled) { background: #0f8ae0; } .countdown-btn:disabled { cursor: not-allowed; background: #8bb9d6; opacity: 0.8; } /style /head body button idcountdownBtn classcountdown-btn发送验证码/button script const countdownBtn document.getElementById(countdownBtn); let timer null; function startCountdown(seconds 3) { // 如果已经在倒计时直接返回防止重复启动 if (timer) { return; } countdownBtn.disabled true; let remain seconds; countdownBtn.textContent ${remain} 秒后重试; timer setInterval(() { remain - 1; if (remain 0) { countdownBtn.textContent ${remain} 秒后重试; } else { clearInterval(timer); timer null; countdownBtn.disabled false; countdownBtn.textContent 发送验证码; } }, 1000); } countdownBtn.addEventListener(click, () { startCountdown(3); }); /script /body /html6.3 关键代码解读这段代码的关键有两点防止重复启动和清除定时器。一开始判断if (timer)是为了防止用户快速连点时创建多个setInterval。如果不加这个判断用户点三次就会创建三个定时器倒计时文字会乱跳定时器也无法被正确清除。按钮的disabled属性在这里起到了双重作用从交互层面拦截鼠标点击连点多少次都不会继续触发click事件。从视觉层面提醒用户当前按钮不可用通过 CSS 中的:disabled样式给出反馈。倒计时结束时的收尾逻辑也很关键clearInterval(timer); timer null; countdownBtn.disabled false; countdownBtn.textContent 发送验证码;这里必须把timer重新置为null否则下次点击时if (timer)仍然能拦住操作按钮就永远无法再次倒计时了。6.4 运行与验证打开countdown-btn.html点击“发送验证码”按钮按钮会立即变为禁用状态文字变成“3 秒后重试”。接下来每秒数字递减2 秒后显示“2 秒后重试”1 秒后显示“1 秒后重试”。倒计时结束按钮恢复为可点击状态文字恢复成“发送验证码”。在这个过程中即使你快速连续点击按钮也不会再次触发倒计时因为按钮已经被disabled了同时代码里还有timer标志位作为第二道保护。7. 合并成一个完整 Demo 页面7.1 合并思路如果你已经在本地运行了前面三个实战你会发现它们其实是三个独立页面。但只要把每个组件的 HTML 结构、CSS 样式和 JavaScript 逻辑提取出来放到同一个 HTML 文件里就能组合成一个综合 Demo。合并时要注意三点避免全局变量名冲突。toast.html里用了container、showToastBtncountdown-btn.html里用了countdownBtn。在同一个页面里变量名不能重复否则会互相覆盖。注意 CSS 类名作用域。Toast 里的.toast、倒计时按钮里的.countdown-btn都是比较通用的类名和页面其他样式冲突的风险较小。但如果项目复杂建议给组件类名加前缀比如.t-toast、.cd-btn。JavaScript 逻辑尽量用函数封装避免散落在一堆全局代码里。下面给出一个合并后的完整demo.html你可以直接复制运行。7.2 完整代码demo.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title帅不过三秒系列 Demo/title style * { box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; margin: 0; 前端限时动效实战：Toast自动消失、3D翻转卡片与倒计时按钮
最近刷到一个梗叫“肺雾正男帅不过三秒”。这句话看似是拿来调侃角色的但放在前端页面里你会发现很多交互组件天生就是“帅不过三秒”的设定提示条弹出来三秒后自动消失卡片帅帅地入场后三秒自动翻转露馅按钮点完之后进入三秒倒计时禁用状态。这些场景在业务开发里实在太常见了而且每一次出现背后都牵扯到定时器管理、动画触发、状态切换这些前端基本功。本文将用原生 HTML CSS JavaScript 实现三个可复用的“限时动效”组件Toast 自动消失提示、3D 翻转卡片、倒计时防重复提交按钮。每个组件都会给出完整可运行的 HTML 文件并逐一解释关键原理和容易踩的坑。适合有一定 HTML/CSS 基础、想系统掌握前端动效与定时器用法的开发者阅读。1. 背景与核心概念1.1 什么是“帅不过三秒”动效“帅不过三秒”的交互本质上是时间驱动的反馈行为。普通交互是用户点了一下按钮页面立刻给出反馈比如点击弹窗、点击展开菜单。但“限时动效”不一样它有一个明确的时间线元素出现后经过若干秒自动执行下一步动作。这个“下一步动作”可能是消失、翻转、禁用、跳转也可能是更新文字内容。这种交互背后其实是一套“延迟触发”逻辑前端实现它主要依赖三类技术CSS 动画负责元素的状态过渡、入场动画、翻转效果。JavaScript 定时器负责“多少秒之后做什么”也就是 setTimeout 和 setInterval。DOM 事件监听负责捕获动画结束、过渡结束这类异步信号从而继续执行后续逻辑。掌握这三样东西你就能写出大量业务中用得到的限时组件。1.2 本文涉及的三个典型场景文章规划了三个实战每一个都对应一类非常常见的业务需求Toast 自动消失提示登录成功、保存成功、操作失败等场景中页面顶部弹出一条轻提示三秒后自动消失。这是“帅不过三秒”最典型的例子也是组件化程度最高的场景之一。3D 翻转卡片活动页面、抽奖页面、打卡打卡页面中卡片以动画入场展示完正面内容后自动翻转显示背面信息或结果。这种效果看似花哨但原理并不复杂。倒计时按钮发送短信验证码、提交订单、领取奖励时按钮点击后进入倒计时期间禁止再次点击。这是防重复提交最常用的前端手段。这三个场景覆盖了自动消失、自动翻转、自动禁用三类常见动效学完之后你会发现很多复杂交互都可以拆成这三种基础模型的组合。1.3 需要掌握的基础知识本文不会引入任何前端框架全部代码基于原生 HTML、CSS、JavaScript。你需要具备以下基础会写基本的 HTML 标签知道div、button、span的用法。了解 CSS 选择器和常见样式属性知道类名切换的基本思路。了解 JavaScript 的变量、函数、事件监听、classList操作。如果你还没有框架经验完全不影响阅读。反而建议先通过原生实现把这套逻辑吃透后面迁移到 Vue、React 时会轻松很多。2. 环境准备与项目结构2.1 运行环境说明考虑到不少读者环境不一样这里不强制要求安装 Node.js、webpack 或任何构建工具。你只需要满足以下条件任意现代浏览器推荐 Chrome、Edge、Firefox 或 Safari。一个文本编辑器推荐 VS Code。一个可以保存.html文件的目录。代码中会用到requestAnimationFrame、addEventListener的{ once: true }参数、CSS 3D transform 属性这些都是现代浏览器已经稳定支持的 API不需要额外配置。本文不会编造具体依赖版本因为整套实战完全不依赖第三方库。2.2 项目文件结构建议新建一个目录命名为time-limited-effects然后按下面的结构创建文件time-limited-effects/ ├── toast.html # 实战一Toast 自动消失提示 ├── flip-card.html # 实战二3D 翻转卡片 ├── countdown-btn.html # 实战三倒计时按钮 └── demo.html # 综合 Demo三个组件合并到同一个页面每个 HTML 文件都是完整的、可以直接用浏览器打开运行的单文件页面。CSS 和 JavaScript 以内嵌方式写在style和script标签中方便你在本地快速验证。如果你只是想快速试验也可以先只创建一个index.html随着文章进度逐步添加代码。下面我们先把核心概念弄清楚再进入实战。3. 核心概念拆解CSS 动画与 JavaScript 定时器3.1 transition 与 animationtransition和animation是 CSS 中实现动效的两种主要方式很多初学者容易混淆这里先做一个区分。transition表示过渡它只能在元素状态发生变化时触发。比如鼠标悬停时改变背景色、元素类名变化时改变透明度。过渡的触发需要满足两个条件属性值发生变化并且该属性在元素上声明了transition。.box { width: 100px; height: 100px; background: #1e9fff; transition: transform 0.3s ease, opacity 0.3s ease; } .box:hover { transform: scale(1.2); opacity: 0.8; }上面的代码里当鼠标悬停在.box上时transform和opacity会以 0.3 秒的时长平滑变化。这里需要特别注意transition不会自动执行必须有一个起点和一个终点状态。animation则表示动画它通过keyframes关键帧来定义完整动画过程可以不依赖用户操作自动播放也可以设置循环、反向播放、结束后保持终态等行为。keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .box { animation: fadeInUp 0.6s ease both; }both是填充模式中的一种它表示动画在开始之前应用第一帧状态在结束之后保持最后一帧状态。这样元素不会在动画还没开始的时候“闪”一下原始样式也不会在动画结束后突然回到默认状态非常适合入场动画场景。在“帅不过三秒”系列组件中我的分配思路是这样的需要自动播放、只在页面加载时执行一次的入场动效优先使用animation。需要配合 JavaScript 动态控制、并且要反复切换状态的动效优先使用transition。比如翻转卡片入场动画用animation翻转过程用transition两者各司其职。3.2 setTimeout 与 setIntervalsetTimeout用于在指定时间后执行一次回调setInterval用于每隔一段时间重复执行回调。它们都是浏览器提供的全局方法是前端定时功能的基础。// 3 秒后执行一次 const timer1 setTimeout(() { console.log(3 秒后执行一次); }, 3000); // 立即清除回调不会执行 clearTimeout(timer1); // 每 1 秒执行一次 const timer2 setInterval(() { console.log(每秒执行一次); }, 1000); // 清除定时器 clearInterval(timer2);setTimeout和setInterval都会返回一个定时器 ID。很多人以为这个返回值是数字或者对象其实在浏览器中它是一个正整数。清除的时候必须把返回的 ID 传给clearTimeout或clearInterval这样浏览器才知道你要取消哪一个定时任务。这里有个常见的坑如果不清除定时器回调函数会在满足条件后继续执行。尤其是setInterval它会一直运行下去即使你已经在页面上看不到对应的组件了它依然在内存中执行这会造成无可挽回的性能浪费。另外要明确一点定时器并不精确。JavaScript 是单线程语言定时器回调只能等主线程空闲时才能执行。如果主线程上有大量同步计算或者浏览器标签页切换到后台定时器会被延迟甚至节流。对于秒级倒计时这种场景如果要求特别严格不能只用setInterval做次数递减而是应该结合时间戳来校准。第 8 章会专门讲这个问题。3.3 动画结束事件CSS 动画和过渡结束后浏览器会触发对应的事件方便 JavaScript 做后续处理。transitionendCSS 过渡结束时触发。animationendCSS 动画结束时触发。先看一个简单的transitionend示例const box document.querySelector(.box); box.addEventListener(transitionend, function (event) { console.log(过渡结束的属性, event.propertyName); }); box.classList.add(show);当.show类被添加后transition开始执行执行完成后transitionend事件触发。这个事件对象上有一个propertyName属性表示哪个 CSS 属性完成了过渡。如果元素同时有多个属性在过渡transitionend会触发多次所以判断propertyName很重要。使用addEventListener时还可以传入{ once: true }选项表示监听器只执行一次就自动移除。这在“动画结束之后只做一次移除操作”的场景里非常方便可以减少手动移除监听器的代码。box.addEventListener(transitionend, function () { box.remove(); }, { once: true });不过要注意transitionend事件在某些情况下不会触发比如过渡还没结束元素就被移除了或者属性值没有发生实际变化。因此在关键业务中不要完全依赖动画结束事件来做兜底逻辑最好同时配合setTimeout作为最后一道保护。4. 实战一3 秒自动消失的 Toast 提示条4.1 需求设计Toast 提示条是很多管理后台、移动端 H5 里都会用到的组件。它的交互逻辑很清晰用户点击按钮或触发某个事件后页面顶部出现一条提示。提示条以淡入加上轻微下移的动画出现。停留 3 秒后提示条以淡出动画消失。提示条消失后必须从 DOM 中移除不能留一堆隐藏节点占用内存。这个需求看似简单但如果处理不好会出现两个问题没有淡入效果元素像是突然出现又突然消失体验很差。Toast 节点移除不及时多次点击后页面 DOM 里堆积了大量隐藏节点。下面来看完整的实现代码。4.2 完整代码toast.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleToast 自动消失提示/title style body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; display: flex; justify-content: center; padding-top: 100px; margin: 0; } .toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 9999; } .toast { background: rgba(0, 0, 0, 0.85); color: #ffffff; padding: 12px 20px; border-radius: 8px; font-size: 14px; line-height: 1.5; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; white-space: nowrap; } .toast.show { opacity: 1; transform: translateY(0); } .trigger-btn { padding: 10px 24px; font-size: 14px; color: #1e9fff; background: #ffffff; border: 1px solid #1e9fff; border-radius: 6px; cursor: pointer; transition: background 0.2s ease; } .trigger-btn:hover { background: #e8f4ff; } /style /head body button idshowToastBtn classtrigger-btn点击弹出提示/button div idtoastContainer classtoast-container/div script const container document.getElementById(toastContainer); const showToastBtn document.getElementById(showToastBtn); function showToast(message, duration 3000) { const toast document.createElement(div); toast.className toast; toast.textContent message; container.appendChild(toast); // 先让浏览器渲染初始样式再添加 .show 触发过渡 requestAnimationFrame(() { toast.classList.add(show); }); // 停留 duration 毫秒后开始消失 setTimeout(() { toast.classList.remove(show); toast.addEventListener( transitionend, () { toast.remove(); }, { once: true } ); }, duration); } showToastBtn.addEventListener(click, () { showToast(这条提示 3 秒后会自动消失); }); /script /body /html4.3 关键代码解读上面的代码里最关键的是requestAnimationFrame的使用。很多初学者在创建元素后直接加类名会发现自己写的transition没有生效。原因很简单当元素刚插入 DOM 时浏览器还没有完成这一帧的样式计算此时立即添加.show类浏览器看到的初始状态就已经是最终状态所以不会触发过渡。解决办法是在插入元素后用requestAnimationFrame把类名添加放到下一帧执行requestAnimationFrame(() { toast.classList.add(show); });requestAnimationFrame的回调会在浏览器下一次重绘之前执行这时候元素已经完成初始渲染添加show类就能正常触发过渡。消失部分的逻辑也值得注意。我先通过setTimeout等待 3 秒然后移除show类让元素执行淡出动画。淡出结束后transitionend事件触发这时代码才真正把 DOM 节点移除。这里使用{ once: true }可以保证只监听一次避免事件重复执行。如果你希望一组 Toast 是堆叠的上面的代码已经可以实现因为容器是flex-direction: column每次插入的新节点会排在下面。如果你希望只显示最新一条可以在showToast开头先container.innerHTML 清空旧节点。4.4 运行与验证用浏览器打开toast.html你会在页面中间看到一个按钮。点击按钮后页面顶部出现一条深色底色的提示条它以淡入和轻微下移动画出现。3 秒后提示条淡出并消失。打开开发者工具的 Elements 面板点击按钮后观察#toastContainer。你会看到.toast节点被创建并插入容器3 秒后节点被移除不会残留多余 DOM。这验证了代码中的清理逻辑是正确的。5. 实战二3 秒后自动翻转的卡片5.1 需求设计第二个实战做一个 3D 翻转卡片。它的设计逻辑如下页面加载后卡片从下方淡入出现。3 秒后卡片自动绕 Y 轴翻转 180 度露出背面。翻转后用户还可以通过按钮手动切换正反面。这个效果经常用在打卡、抽奖、翻牌、每日任务等场景。比如正面写“今日任务”3 秒后自动翻到背面显示“已完成”或者正面是一个帅气的活动头图3 秒后翻到背面展示规则。实现翻转效果需要用到 CSS 3D 变换有三个属性必须理解perspective、transform-style、backface-visibility。perspective是透视距离它决定了 3D 效果的视觉深度。没有它元素旋转看起来就像被压扁的平面。transform-style: preserve-3d让父元素保留子元素的 3D 位置而不是把它们压平到同一个平面。backface-visibility: hidden让元素的背面不可见。当元素旋转 180 度后背面朝用户时就不会显示原来的正面内容。5.2 完整代码flip-card.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title3 秒后自动翻转卡片/title style body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; display: flex; flex-direction: column; align-items: center; padding-top: 60px; margin: 0; } .scene { width: 260px; height: 340px; perspective: 800px; margin-bottom: 30px; animation: fadeInUp 0.6s ease both; } .card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s ease; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .card.flipped { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; inset: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; color: #ffffff; } .card-front { background: linear-gradient(135deg, #667eea, #764ba2); } .card-back { background: linear-gradient(135deg, #f093fb, #f5576c); transform: rotateY(180deg); } .card-front h2, .card-back h2 { margin: 0 0 8px 0; } .card-front p, .card-back p { margin: 0; font-size: 14px; opacity: 0.9; } .flip-btn { padding: 10px 24px; font-size: 14px; color: #ffffff; background: #764ba2; border: none; border-radius: 6px; cursor: pointer; } .flip-btn:hover { opacity: 0.9; } keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /style /head body div classscene div classcard idautoFlipCard div classcard-front h2帅不帅/h2 p3 秒后见分晓/p /div div classcard-back h2帅不过三秒/h2 p翻车了…/p /div /div /div button idflipBtn classflip-btn点击翻转/button script const card document.getElementById(autoFlipCard); const flipBtn document.getElementById(flipBtn); // 3 秒后自动翻转到背面 setTimeout(() { card.classList.add(flipped); }, 3000); // 按钮手动切换正反面 flipBtn.addEventListener(click, () { card.classList.toggle(flipped); }); /script /body /html5.3 关键代码解读这套代码里有一个容易踩的坑入场动画不要和翻转动画写在同一个元素上。我特意把入场动画fadeInUp写在.scene上而翻转用的transition写在.card上。为什么这么分开因为animation和transition都会控制transform属性。如果两者同时作用在同一个元素上入场动画执行期间你可能看到扭曲、跳变动画结束后transform状态也很难控制。把动画放在父容器.scene上翻转放在子元素.card上两者互不干扰。入场动画 0.6 秒播放完毕both填充模式让卡片保持最终位置3 秒后子元素开始旋转视觉上依然能看到完整的 3D 效果。再看.card-back的transform: rotateY(180deg)。这一步很容易遗漏。如果背面元素没有预先旋转 180 度那么当.card整体旋转 180 度后背面元素的正面仍然面向卡片内部用户会看到背面内容被镜像显示或者因backface-visibility: hidden而完全看不到任何内容。.card-front和.card-back都设置了backface-visibility: hidden这样两个面里始终只有一个面能被看到不会出现正反两面同时透出来的情况。5.4 运行与验证打开flip-card.html页面加载时卡片从下方淡入。3 秒后卡片自动绕 Y 轴翻转 180 度正面“帅不帅”消失背面“帅不过三秒”出现。此时点击“点击翻转”按钮卡片会翻回正面再点击一次又翻到背面。这个过程中卡片的两个面切换非常平滑没有背面内容镜像、闪烁等异常。你可以在开发者工具的 Console 里执行下面这行代码验证定时器是否在页面加载时已经注册document.getElementById(autoFlipCard).className;页面打开 3 秒后再次执行你会发现card的类名发生了变化说明定时器生效了。6. 实战三3 秒倒计时按钮6.1 需求设计第三个实战是倒计时按钮它在工程中的价值最大。很多网站都有“获取验证码”“确认支付”“提交订单”这类按钮如果用户手抖点了两次就会发出两次请求轻则数据重复重则产生费用问题。前端倒计时按钮的核心思路是按钮点击后进入不可用状态同时显示剩余秒数倒计时结束后恢复到可点击状态。这种“帅不过三秒”的按钮本质上是给用户一个无法绕开的操作保护。6.2 完整代码countdown-btn.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title3 秒倒计时按钮/title style body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; display: flex; justify-content: center; padding-top: 100px; margin: 0; } .countdown-btn { min-width: 160px; padding: 12px 24px; font-size: 14px; color: #ffffff; background: #1e9fff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s ease; } .countdown-btn:hover:not(:disabled) { background: #0f8ae0; } .countdown-btn:disabled { cursor: not-allowed; background: #8bb9d6; opacity: 0.8; } /style /head body button idcountdownBtn classcountdown-btn发送验证码/button script const countdownBtn document.getElementById(countdownBtn); let timer null; function startCountdown(seconds 3) { // 如果已经在倒计时直接返回防止重复启动 if (timer) { return; } countdownBtn.disabled true; let remain seconds; countdownBtn.textContent ${remain} 秒后重试; timer setInterval(() { remain - 1; if (remain 0) { countdownBtn.textContent ${remain} 秒后重试; } else { clearInterval(timer); timer null; countdownBtn.disabled false; countdownBtn.textContent 发送验证码; } }, 1000); } countdownBtn.addEventListener(click, () { startCountdown(3); }); /script /body /html6.3 关键代码解读这段代码的关键有两点防止重复启动和清除定时器。一开始判断if (timer)是为了防止用户快速连点时创建多个setInterval。如果不加这个判断用户点三次就会创建三个定时器倒计时文字会乱跳定时器也无法被正确清除。按钮的disabled属性在这里起到了双重作用从交互层面拦截鼠标点击连点多少次都不会继续触发click事件。从视觉层面提醒用户当前按钮不可用通过 CSS 中的:disabled样式给出反馈。倒计时结束时的收尾逻辑也很关键clearInterval(timer); timer null; countdownBtn.disabled false; countdownBtn.textContent 发送验证码;这里必须把timer重新置为null否则下次点击时if (timer)仍然能拦住操作按钮就永远无法再次倒计时了。6.4 运行与验证打开countdown-btn.html点击“发送验证码”按钮按钮会立即变为禁用状态文字变成“3 秒后重试”。接下来每秒数字递减2 秒后显示“2 秒后重试”1 秒后显示“1 秒后重试”。倒计时结束按钮恢复为可点击状态文字恢复成“发送验证码”。在这个过程中即使你快速连续点击按钮也不会再次触发倒计时因为按钮已经被disabled了同时代码里还有timer标志位作为第二道保护。7. 合并成一个完整 Demo 页面7.1 合并思路如果你已经在本地运行了前面三个实战你会发现它们其实是三个独立页面。但只要把每个组件的 HTML 结构、CSS 样式和 JavaScript 逻辑提取出来放到同一个 HTML 文件里就能组合成一个综合 Demo。合并时要注意三点避免全局变量名冲突。toast.html里用了container、showToastBtncountdown-btn.html里用了countdownBtn。在同一个页面里变量名不能重复否则会互相覆盖。注意 CSS 类名作用域。Toast 里的.toast、倒计时按钮里的.countdown-btn都是比较通用的类名和页面其他样式冲突的风险较小。但如果项目复杂建议给组件类名加前缀比如.t-toast、.cd-btn。JavaScript 逻辑尽量用函数封装避免散落在一堆全局代码里。下面给出一个合并后的完整demo.html你可以直接复制运行。7.2 完整代码demo.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title帅不过三秒系列 Demo/title style * { box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; background: #f5f6f8; margin: 0;