DNA 双螺旋 DNA Helix

模拟 DNA 双螺旋结构的加载动画，两列圆点通过 translateY 和 opacity 交替运动，产生立体螺旋的视觉错觉。

实时预览

代码

css

.dna {
  position: relative;
  width: 40px;
  height: 80px;
}

.dna-strand {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
}

.dna-strand.strand-2 {
  left: 20px;
}

.dna-strand .dna-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #40b883;
  margin: 2px 0;
  animation: dna-helix 2s ease-in-out infinite;
}

/* Stagger delays for strand 1 */
.dna-strand .dna-dot:nth-child(1) { animation-delay: 0s; }
.dna-strand .dna-dot:nth-child(2) { animation-delay: 0.125s; }
/* ... up to nth-child(8) */

/* Strand 2 offsets by half the period */
.dna-strand.strand-2 .dna-dot:nth-child(1) { animation-delay: 0.5s; }
/* ... up to nth-child(8) */

@keyframes dna-helix {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1;
  }
  25% {
    transform: translateY(0) translateX(-5px) scale(0.6);
    opacity: 0.5;
  }
  50% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1;
  }
  75% {
    transform: translateY(0) translateX(5px) scale(1.3);
    opacity: 0.5;
  }
}

html

<div class="dna">
  <div class="dna-strand">
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
  </div>
  <div class="dna-strand strand-2">
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
    <div class="dna-dot"></div>
  </div>
</div>

纯 CSS 实现的DNA 双螺旋加载动画——通过 @keyframes 和 animation 属性创建循环播放的加载指示器。比 GIF 体积更小、缩放不失真，完全不需要 JavaScript。

快速使用

复制 CSS 代码到你的样式文件（含 @keyframes 定义）
在需要显示加载状态的位置添加 HTML 结构
调整 width/height 控制大小，animation-duration 控制速度
数据加载完成后移除 loading 元素，释放 GPU 资源

使用场景

页面初始加载：在 SPA 或内容较重的页面中，用骨架屏或旋转动画代替白屏等待
数据请求等待：按钮提交后显示加载状态，防止重复点击
文件上传/下载：配合进度条或环形进度指示操作进度
无限滚动加载更多：页面底部显示加载指示器，告知用户内容正在加载

常见问题

Q: Loading 动画什么时候需要停止？ A: 数据加载完成后，通过 JavaScript 移除动画元素的 class 或直接移除 DOM 元素。可以给元素加 animation: none 立即停止动画，释放 GPU 资源。

Q: 多个 Loading 元素会互相影响吗？ A: 不会。每个 CSS animation 相互独立。但如果页面同时有 20+ 个动画元素，移动端可能出现卡顿。建议一个页面只保留 1-2 个主 loading 指示器。

Q: 如何让 Loading 动画适应不同尺寸？ A: 所有尺寸用相对单位或无单位值。建议用 CSS 自定义属性（如 --loader-size: 48px）统一控制，方便全局调整。

浏览器兼容性

本效果使用标准 CSS 属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）均完全支持。

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	⚠️ 部分 `@keyframes` / `animation` 需要 `-ms-` 前缀

使用说明

属性	说明
`translateX`	控制螺旋摆动幅度，值越大螺旋越宽
`scale`	模拟圆点远近的透视缩放效果
`animation-delay` 间隔	控制螺旋的紧密程度，间隔越大螺旋越密
两列偏移量	第二列延迟为周期的一半，形成反向螺旋
`animation-duration`	控制整体螺旋旋转速度

DNA 双螺旋 DNA Helix ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐