iPhone 11 呼吸灯效果
本页面展示如何使用原生 HTML、CSS 和 JavaScript 实现类似 iPhone 11 的呼吸灯动画效果。该效果常用于提示用户设备正在运行或等待响应。
以下为实现该效果的核心 CSS 代码:
@keyframes breathe {
0%, 100% {
opacity: 0.3;
transform: scale(0.9);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.breathing-light {
animation: breathe 3s ease-in-out infinite;
}
你可以将此效果集成到你的项目中,用于加载提示、通知提醒等场景。