纯css可实现dna双螺旋动画：用--d控制偏移与延迟，transform-style:preserve-3d+perspective启用3d，伪元素镜像旋转（rotatey±360deg）模拟碱基对缠绕。
直接用纯 CSS 就能做出 DNA 双螺旋动画，不需要 JS，关键在三点：自定义属性 --d 控制每个单元位置、calc() 配合定位与延迟、@keyframes 驱动 3D 旋转。下面分步说清楚怎么搭、为什么这么写、哪里容易翻车。
用 --d 自定义属性批量控制元素偏移和动画延迟
每个 .line 元素通过内联 style="--d:1;"、style="--d:2;" … 赋值，CSS 里用 var(--d) 读取。这不是装饰，是核心调度机制。
常见错误是把 --d 写在 :root 或父容器里——它必须作用于每个子元素本身，否则 calc(0.3s * var(--d)) 算出来全是同一个延迟，所有元素一起动，就不是螺旋了。
-
top: calc(50px * var(--d));让每个.line垂直错开，形成“阶梯”结构 -
animation-delay: calc(0.3s * var(--d));实现逐个启动的波浪感 - 数值 50px 和 0.3s 不是 magic number，要按你总高度和动画时长反推：比如 12 个元素占 600px 高，就用
calc(50px * var(--d))；想整体循环 4s，单个延迟步进选 0.3–0.4s 比较自然
transform-style: preserve-3d 必须加在容器上，不是子元素
这是 3D 效果生效的前提。如果只给 .line 加 transform-style: preserve-3d，它的伪元素 ::before 和 ::after 依然在 2D 平面渲染，转起来像贴纸而不是立体球。
正确做法是把 transform-style: preserve-3d 和 perspective: 1000px 都设在 .container 上，再配合 transform: rotateZ(15deg) 预倾斜，让双链看起来有“拧”的角度。
- 漏掉
preserve-3d→ 伪元素不参与 3D 渲染，动画扁平无纵深 -
perspective值太小（如 100px）→ 旋转夸张变形；太大（如 5000px）→ 几乎看不出 3D 感，建议 800–1200px 区间试 -
rotateZ()不加 → 两条链正对屏幕，像并排的晾衣绳，不是螺旋
伪元素 ::before / ::after 的颜色和定位必须严格镜像
DNA 双链本质是左右对称旋转，靠两个伪元素分别代表碱基对的 A-T、C-G。颜色差异只是示意，关键是它们的 transform 方向要相反：
- 左边圆：
transform: rotateY(360deg);（顺时针） - 右边圆：
transform: rotateY(-360deg);（逆时针） - 如果都写正向，或都用
rotateX，转起来就“同向打滑”，失去缠绕感 -
left: 0;和right: 0;必须配position: absolute，且父级.line得是position: relative，否则定位脱标
示例片段（关键部分）：
.container .line::before {
background-color: #E60116;
left: 0;
}
.container .line::after {
background-color: #0588DA;
right: 0;
}
@keyframes roll {
100% { transform: rotateY(360deg); }
}
@keyframes roll-right {
100% { transform: rotateY(-360deg); }
}
动画性能：避免在 top/left 上做动画
上面例子用了 top: calc(...) 静态定位，但动画本身只驱动 transform: rotateY()。这点很关键——如果把位移逻辑也塞进动画里（比如用 translateY() 动态算位置），浏览器会频繁触发 layout，尤其在低端设备上掉帧明显。
- 所有位置偏移（垂直间距、左右圆定位）都用静态 CSS 完成
- 只让
transform和opacity进入动画，它们走 GPU 合成层，丝滑 - 别用
animation-timing-function: ease-in-out模拟生物感——线性linear才符合 DNA 匀速旋转的物理直觉
真正难调的其实是视角和节奏的平衡：perspective、rotateZ、单帧延迟三者得一起试，差 50px 或 0.05s，就可能从“逼真螺旋”变成“拧毛巾”。动手前先定好容器尺寸和元素总数，再反推参数，比盲目调更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
