浮动光斑

Colorful, blurred shapes float around and morph organically for a liquid feel.

实时预览

🫧 Floating Blobs

Morphing & drifting

代码

html

<div class="blobs-bg">
  <div class="blob blob-1"></div>
  <div class="blob blob-2"></div>
  <div class="blob blob-3"></div>
</div>

<style>
  .blobs-bg {
    background: #0d0d1a;
    position: relative;
    overflow: hidden;
  }

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    mix-blend-mode: screen;
  }

  .blob-1 {
    width: 200px; height: 200px;
    background: #667eea;
    top: 10%; left: 20%;
    animation: blob-float-1 10s ease-in-out infinite;
  }

  .blob-2 {
    width: 160px; height: 160px;
    background: #f093fb;
    top: 50%; right: 15%;
    animation: blob-float-2 12s ease-in-out infinite;
  }

  .blob-3 {
    width: 180px; height: 180px;
    background: #43e97b;
    bottom: 10%; left: 40%;
    animation: blob-float-3 9s ease-in-out infinite;
  }

  @keyframes blob-float-1 {
    0%, 100% { transform: translate(0,0) scale(1); border-radius: 50%; }
    33%      { transform: translate(50px,-30px) scale(1.15); border-radius: 40% 60% 55% 45%; }
    66%      { transform: translate(-20px,40px) scale(0.9); border-radius: 55% 45% 40% 60%; }
  }

  @keyframes blob-float-2 {
    0%, 100% { transform: translate(0,0) scale(1); border-radius: 50%; }
    33%      { transform: translate(-40px,30px) scale(1.1); border-radius: 60% 40% 50% 50%; }
    66%      { transform: translate(30px,-50px) scale(0.85); border-radius: 45% 55% 60% 40%; }
  }

  @keyframes blob-float-3 {
    0%, 100% { transform: translate(0,0) scale(1); border-radius: 50%; }
    50%      { transform: translate(60px,-40px) scale(1.2); border-radius: 35% 65% 50% 50%; }
  }
</style>

纯 CSS 实现的浮动光斑背景动画——通过渐变、滤镜和 @keyframes 创建动态背景效果。无需 Canvas、WebGL 或任何 JavaScript，即可让页面背景"活"起来。

快速使用

复制 CSS 代码（含 @keyframes）到你的样式文件中
将背景动画样式应用到目标容器元素上
调整 background-size 和 animation-duration 控制效果
确保容器有明确的高度（min-height），否则背景可能不可见

使用场景

品牌落地页：用渐变流动或极光背景提升页面的高级感
技术/黑客主题页面：矩阵代码雨或粒子背景传递科技氛围
创意/设计类网站：浮动光斑或网格动画展现设计感
节日/活动页面：动态背景配合主题色营造节日氛围

常见问题

Q: 背景动画会消耗很多 CPU 吗？ A: 会消耗一定的 GPU 资源。建议在用户不可见时（如切换标签页）暂停动画，用 animation-play-state: paused 配合 document.hidden API。移动端慎用多个滤镜叠加。

Q: 如何让背景动画不影响内容可读性？ A: 在动画层之上加一个半透明遮罩层（如 background: rgba(0,0,0,0.4)），或将文字放在独立的叠层中。也可以降低动画的 opacity 到 0.3~0.5。

Q: 背景动画在所有浏览器下都正常吗？ A: conic-gradient 需要较新浏览器版本。@property 仅 Chrome/Edge。建议提供降级方案：用 linear-gradient + background-position 动画替代。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持（含 conic-gradient、@property）
Firefox	✅ 基本支持（不含 @property）
Safari	✅ 基本支持
移动端浏览器	✅ 完全支持
IE 11	❌ 高级渐变和动画不支持

浮动光斑 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

📎 相关动画推荐