纯 HTML+CSS 实现蛇形扭动特效详解

注意： 使用 style="--i: N" 设置 CSS 自定义属性，用于计算延迟。建议节数在 8-12 之间，过多会影响性能。

CSS 动画核心逻辑

1. 关键帧定义

避免使用匀速动画（linear），应加入中间状态以模拟生物运动的加速度。

@keyframes wiggle {
    0%, 100% {
        transform: translateY(-50%) rotate(-25deg) translateX(0);
    }
    25% {
        transform: translateY(-50%) rotate(0deg) translateX(10px);
    }
    50% {
        transform: translateY(-50%) rotate(25deg) translateX(0);
    }
    75% {
        transform: translateY(-50%) rotate(0deg) translateX(-10px);
    }
}

2. 缓动函数选择

使用 ease-in-out 替代 linear，使运动具备'起步慢 - 加速 - 减速'的自然节奏。

3. 变换原点 (transform-origin)

默认旋转中心是元素中心，但蛇关节连接处通常在边缘。需调整原点以确保连贯性。

.snake-segment {
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    left: calc(var(--i) * 45px);
    top: 50%;
    transform: translateY(-50%);
    /* 绕左边缘中心旋转 */
    transform-origin: left center;
    animation: wiggle 2s ease-in-out infinite;
    /* 错开时间形成波浪 */
    animation-delay: calc(var(--i) * 0.15s);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

进阶：S 形扭动与整体移动

若需实现蛇向前爬行且身体呈 S 形，需结合整体平移动画与局部摆动动画。

.snake-body {
    position: absolute;
    left: -100px;
    top: 50%;
    display: flex;
    align-items: center;
    /* 整体平移 */
    animation: crawl 8s linear infinite;
}

.snake-segment {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #00b894, #00cec9);
    border-radius: 50%;
    margin-right: -5px;
    /* 局部摆动，相位错开 */
    animation: s-wave 1s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes crawl {
    0% { transform: translateX(0) translateY(-50%); }
    100% { transform: translateX(1200px) translateY(-50%); }
}

@keyframes s-wave {
    0% { transform: translateY(-10px); border-radius: 40% 60% 60% 40%; }
    100% { transform: translateY(10px); border-radius: 60% 40% 40% 60%; }
}

性能优化

在移动端或节点较多时，需注意硬件加速。

.snake-segment {
    will-change: transform;
    transform: translate3d(0, 0, 0) translateY(-50%);
    backface-visibility: hidden;
}

/* 动画结束后回收资源 */
.snake-segment:hover {
    will-change: auto;
}

常见问题排查

1. 动画卡顿：检查是否使用了 linear 缓动，尝试 cubic-bezier。
2. 负延迟问题：animation-delay 支持负值，可让后续节点提前开始，形成追赶效果。
3. iOS Safari 兼容：
   • 圆角锯齿：添加 transform: translateZ(0)。
   • 省电模式：使用 @media (prefers-reduced-motion: reduce) 提供静态降级方案。

扩展应用

该原理同样适用于波浪文字、蠕动进度条等场景。

.wave-text span {
    display: inline-block;
    animation: wave 1s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.05s);
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

通过合理控制时间差与变换属性，即可在不引入 JS 的情况下实现复杂的动态视觉效果。