分享一个前段时间用 TRAE 复刻的 macOS 锁屏网页 UI，整体视觉还原度我自己还挺满意的。
全程沿用了 macOS 原生的设计语言，字体直接用 -apple-system、BlinkMacSystemFont 这类系统字体，气质一下就对了。再配合 backdrop-filter 做出的毛玻璃模糊层，通透感和层次感都很接近原生，模糊层的渐变过渡反复调了很多次，最终出来的效果柔和又自然，在电脑和手机上看都很舒服。
细节上也尽量贴近原版：密码框用半透的白色渐变，聚焦和 hover 时的状态都和系统保持一致；底部文字排版、间距、按钮圆角都严格对齐 macOS 规范。就连输错密码时的抖动动画，也照着原生的节奏和幅度去做，视觉和微动效的沉浸感很足。
1. 字体与排版：对齐系统气质
macOS原生使用San Francisco字体，网页中通过系统字体栈精准匹配：
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
这套字体栈能让不同设备（尤其是苹果设备）直接调用系统原生字体，非苹果设备也能匹配最接近的无衬线字体，保证排版气质和macOS一致。
排版上严格遵循macOS规范：
- 密码框、按钮的圆角统一用6px（贴近macOS控件圆角标准）；
- 文字间距、行高参考原生锁屏的视觉比例，比如时间字体权重300（轻量感）、用户名权重400（常规），底部提示文字opacity设为0.7（弱化但不消失）；
- 所有交互元素（输入框、按钮）的hover/focus状态，透明度变化幅度和原生保持一致（比如输入框聚焦时背景透明度从0.1提升到0.15）。
2. 毛玻璃质感：backdrop-filter实现通透感
macOS的毛玻璃是核心视觉特征，网页中通过backdrop-filter: blur()实现，同时做了兼容和过渡优化：
.blur-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
opacity: 0;
/* 渐变过渡让模糊生效更自然 */
transition: opacity 0.3s ease, backdrop-filter 1.5s ease, -webkit-backdrop-filter 1.5s ease;
}
/* 按钮的毛玻璃效果 */
.blur-arrow-btn {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* 兼容Safari */
}
为了避免模糊效果突然出现导致的视觉突兀，在JS中做了「先显示遮罩、延迟添加模糊」的处理：
window.addEventListener('load', function() {
const blurOverlay = document.querySelector('.blur-overlay');
blurOverlay.style.opacity = '1';
// 延迟100ms添加模糊，过渡更柔和
setTimeout(() => {
blurOverlay.style.backdropFilter = 'blur(15px)';
blurOverlay.style.webkitBackdropFilter = 'blur(15px)';
}, 100);
});
3. 微动效：贴近原生的交互反馈
macOS原生锁屏的细节动效是沉浸感的关键，重点还原了2个核心动效：
- 输错密码的抖动动画：复刻原生的抖动节奏（左右偏移3px，0.5s时长），用CSS keyframes实现：
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-3px); }
40%, 80% { transform: translateX(3px); }
}
- 交互元素的hover/focus过渡：所有可交互元素（输入框、箭头按钮）都加了0.2s的缓动过渡，和macOS原生的交互节奏匹配：
.password-input {
transition: all 0.2s ease;
}
.blur-arrow-btn {
transition: all 0.2s ease;
}
代码实现步骤
1. 页面结构（HTML）
核心结构分为三层：背景层、毛玻璃遮罩层、锁屏内容层，保证层级和原生一致：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mac锁屏</title>
<!-- 预加载背景图，避免闪烁 -->
<link rel="preload" href="https://pic.netbian.com/uploads/allimg/250722/230042-1753196442fcf9.jpg" as="image">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 毛玻璃遮罩层 -->
<div class="blur-overlay"></div>
<!-- 锁屏核心内容层 -->
<div class="lock-container">
<!-- 用户信息区 -->
<div class="user-container">
<div class="avatar-container">
<img src="图片外链" alt="用户头像" class="avatar-img">
</div>
<div class="username">Tangyuan</div>
</div>
<!-- 密码输入区 -->
<div class="login-form">
<div class="input-wrapper">
<input type="password" class="password-input" placeholder="输入密码解锁" id="password">
<button class="blur-arrow-btn"></button>
</div>
<div class="hint">按Enter键解锁</div>
<button class="cancel-btn">取消</button>
</div>
<!-- 底部提示文字 -->
<div class="camera-notification">摄像头已自动拍照并上传iCloud请主动自首！</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. 样式实现（CSS）
- 全局重置：清除默认边距，设置box-sizing为border-box，统一字体；
- 背景层：用
background-size: cover让背景图铺满屏幕，overflow: hidden避免滚动； - 锁屏容器：居中布局，z-index高于遮罩层，保证内容可见；
- 输入框/按钮：半透明白色背景，匹配macOS的半透明控件风格，聚焦/hover时微调透明度。
3. 交互逻辑（JavaScript）
- 时间更新：实时显示当前时间和星期/时段（上午/下午），1秒刷新一次；
- 密码交互：按Enter键/点击箭头按钮触发抖动动画，清空输入框；
- 聚焦优化：点击页面任意位置、初始加载时自动聚焦密码框，贴近原生操作习惯；
- 取消按钮：清空输入框并重新聚焦，还原原生取消功能。
踩坑与优化
- 毛玻璃兼容问题：
backdrop-filter在部分浏览器（如Chrome旧版本）需要加-webkit前缀，且必须配合背景色（不能完全透明）才能生效，因此给遮罩层加了rgba(0, 0, 0, 0.2)的背景； - 背景图闪烁：通过
<link rel="preload">预加载背景图，避免页面加载时的视觉断层； - 动效过渡不自然：模糊层的
backdrop-filter单独做1.5s的过渡，比和opacity一起过渡更柔和； - 移动端适配：设置
viewport的initial-scale=1.0，密码框用flex布局适配不同屏幕宽度，保证手机端显示正常。
最终效果
这个复刻版本在视觉上高度贴近macOS原生锁屏：
- 字体、排版、圆角等基础视觉元素和系统一致；
- 毛玻璃模糊的过渡效果柔和，通透感接近原生；
- 输错密码的抖动、按钮hover等微动效和系统节奏匹配；
- 电脑和手机端的显示效果都能保持一致的沉浸感。
