用 CSS 画一片会呼吸的海

不需要 Canvas，不需要 WebGL，几行 CSS 就能让页面拥有情绪。

一片海的底色

海的关键在于多层次渐变。用一个从深蓝到青碧的线性渐变打底，再叠一层径向光斑模拟太阳反光：

.ocean {
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 217, 142, .35), transparent 40%),
    linear-gradient(160deg, #2b3a67, #7fe3d4 60%, #ffd98e);
}

让它"呼吸"

keyframes 里不要直接改 background（性能差），正确姿势是让一个半透明白色层做位移和透明度变化：

@keyframes breathe {
  0%, 100% { opacity: .25; transform: translateY(0) scaleY(1); }
  50%      { opacity: .55; transform: translateY(-6px) scaleY(1.04); }
}
.ocean::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(transparent 40%, rgba(255,255,255,.4));
  animation: breathe 6s ease-in-out infinite;
}

波光的秘密

最后撒一层细碎的星点当作波光，用两个不同周期的动画交错，就能骗过人眼：

• transform 优先于 opacity，opacity 优先于改颜色
• 动画时长取质数（如 6s / 7s），叠加后不容易显得机械
• will-change 不要滥用，只加给真正在动的层

小结

静态页面"活起来"靠的不是堆特效，而是让一两处动效做得足够克制、足够顺滑。整片海只用了 30 行 CSS，剩下的交给想象力。

祝你也能在自己的页面上养一片海。