iPhone 锁屏渐变效果

什么是 iPhone 锁屏渐变？

自 iOS 16 起，Apple 允许用户自定义锁屏界面，其中最受欢迎的功能之一就是使用动态渐变作为壁纸背景。 这些渐变色彩柔和、过渡自然，并随时间或交互产生微妙变化，营造出沉浸式的视觉体验。

网页版渐变效果演示

以下是一个模拟 iPhone 锁屏渐变风格的动态背景：

如何用 CSS 实现？

核心代码使用了 CSS 的 linear-gradient 和 @keyframes 动画：

<div class="gradient-demo">动态渐变背景</div>

.gradient-demo {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
  background-size: 800% 800%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

设计灵感与应用

此类渐变效果不仅适用于移动端壁纸，也可用于网页 Hero 区域、登录页面、加载动画等场景。 通过调整颜色组合和动画节奏，可以匹配品牌调性或节日氛围（如春节红金、圣诞绿红等）。