清屏动画可通过五种方法实现：一、CSS 淡出；二、CSS 缩放；三、位移 + 透明度组合；四、Canvas 覆盖；五、SVG 遮罩扩散，均需 HTML 结构配合 CSS 动画与 JavaScript 触发。
如果您希望在 HTML 页面中实现清屏动画效果，即让当前页面内容以某种视觉动画方式“清除”或“消失”，可以通过 CSS 动画与 JavaScript 控制 DOM 元素的显示状态来完成。以下是几种不同的实现方法：
一、使用 CSS 淡出动画清屏
该方法通过为页面根容器添加淡出动画，使所有内容在 0.5 秒内透明度从 1 降至 0，再隐藏元素，达到清屏视觉效果。
1、在 HTML 中为
外层包裹一个 id 为 ”screen” 的
2、在
立即学习 “ 前端免费学习笔记（深入）”；
3、添加 CSS 类。clear-screen {animation: fade-out 0.5s forwards;}。
4、通过 JavaScript 执行 document.getElementById(‘screen’).className = ‘clear-screen’; 触发动画。
二、使用 CSS 缩放动画清屏
该方法利用 transform 的 scale 属性，使页面容器在动画过程中快速缩小至中心点并消失，营造“吸入式”清屏感。
1、确保页面主体内容被包裹在具有 class=”viewport” 的容器内。
2、定义 @keyframes zoom-out {from { transform: scale(1); } to {transform: scale(0.01); opacity: 0; } }。
3、设置。zoom-clear {animation: zoom-out 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }。
4、调用 element.classList.add(‘zoom-clear’)作用于 viewport 容器。
三、使用 CSS 位移 + 透明度组合清屏
该方法结合垂直位移与透明度变化，模拟内容向上滑出视口并消隐的效果，增强方向性清屏体验。
1、将全部可视内容放入
2、定义 @keyframes slide-up-fade {from { transform: translateY(0); opacity: 1; } to {transform: translateY(-100vh); opacity: 0; } }。
3、声明。slide-clear {animation: slide-up-fade 0.6s ease-out forwards;}。
4、执行 document.getElementById(‘main-content’).classList.add(‘slide-clear’); 启动动画。
四、使用 Canvas 全屏覆盖清屏
该方法不操作原有 DOM，而是动态创建全屏canvas，绘制渐变遮罩并逐帧降低不透明度，形成覆盖式清屏动画。
1、在页面末尾插入。
2、获取 canvas 上下文 ctx = document.getElementById(‘clear-canvas’).getContext(‘2d’);。
3、定义 drawOverlay(alpha)函数，用 ctx.fillStyle = `rgba(0,0,0,${alpha})` 填充全画布。
4、使用 requestAnimationFrame 递减 alpha 值（如从 0.0 到 1.0），当 alpha 达 1.0 时 清屏完成，可重置页面或跳转。
五、使用 SVG mask 动画清屏
该方法借助 SVG 的 mask 元素定义圆形扩散遮罩，配合 CSS 动画实现从中心向四周“吞噬”内容的清屏效果。
1、在 HTML 中添加隐藏的 svg>，内含
2、为 body 或主容器设置 style=”mask: url(#clear-mask); -webkit-mask: url(#clear-mask);”。
3、定义。mask-animation {animation: mask-expand 0.7s forwards;}，其中 @keyframes mask-expand {to { r: 2000;} }。
4、触发时为 circle 元素添加。mask-animation 类，注意需预先设置 circle 的 cx/cy 为视口中心坐标。
