主页/WEB笔记/3D分层文字动效怎么玩，从运动到变体这些花样你试过吗？

3D分层文字动效怎么玩，从运动到变体这些花样你试过吗？

3,228字
14–20 分钟
in

之前我们用纯CSS搞定了那个3D分层文字效果，看着是挺唬人的，但一动不动的，总觉得差点意思。这回来点带劲的，让文字动起来，看看加点过渡和动画，整个感觉能翻出多少新花样。

目录

想让3D文字活起来？光有厚度不够，还得让它扭一扭、晃一晃、甚至每个字母都蹦跶起来。从简单的摇摆到复杂的图层延迟动画，再到给每层换皮肤，这里有一堆让分层文字瞬间“成精”的玩法。有例子有代码，直接上手就能试，看静态效果怎么变身动态视觉。

玩转摇摆与悬浮

先整一个看着简单但效果挺魔性的动画。有时候只想让文字转个圈，但又得保证字本身是正的，能让人看清楚。这里的门道在于，利用多个轴向的旋转互相抵消。比如先让文字在Z轴上转一圈，中间给它加个X轴的倾斜，最后再转回来。这么一搞，字的方向没变，但整个视角却像喝醉了一样晃来晃去。

@keyframes wobble {
  from { transform: rotate(0deg) rotateX(20deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(20deg) rotate(0deg); }
}

把这个动画加到.layers上，就会发现文字每一层都跟着摆动，从各个角度秀出它的厚度感。光这么晃还不够，再配合一个上下浮动的效果，让整个文字在Z轴方向来回移动。把下面这段代码塞进去，同时给最底下那层文字加上一个会呼吸的阴影，那种悬在半空的感觉立马就出来了。

.layers {
  animation: hover 2s infinite ease-in-out alternate;
}

@keyframes hover {
  from { transform: translateZ(0.3em); }
  to { transform: translateZ(0.6em); }
}

span {
  color: transparent;
  animation: shadow 2s infinite ease-in-out alternate;
}

@keyframes shadow {
  from { text-shadow: 0 0 0.1em #000; }
  to { text-shadow: 0 0 0.2em #000; }
}

让字母各自飞

整段文字一起动，看着是整齐，但总觉得少了点灵动感。能不能让每个字母自个儿跳起舞来？这想法听起来挺嗨，实现起来也简单，就是把单词拆成一个一个字母，然后分别给它们加动画。不过得留个心眼，字母一多，页面上的动画元素就跟着暴涨，性能这块儿得掂量掂量。碰到字母多的词，要么减少动画的图层数量，要么就别把所有字母都拆开。搞了个五个字母的例子，把图层数降到十六层，再用display: flex让它们排排坐，然后用:nth-child给每个字母加点延迟，效果就出来了。

换个姿势玩旋转

光在Z轴方向动，时间长了也腻歪。每层文字其实都能在任意方向动，只要用好--n这个变量，各种奇葩效果都能整出来。比如说，只让文字在X轴方向来回平移，造成一种错位晃动的感觉。或者在Y轴上来点旋转，文字就像多米诺骨牌一样斜着倒。要是给X轴加旋转，那就是点头哈腰的效果。最带劲的还得是给Z轴加旋转，整个文字就像个风车一样转起来，每层的旋转角度都不一样，那立体感，绝了。

玩转图层时间差

前面玩的都是让整个文字一起动，但分层文字最大的优势就是可以单独控制每一层。拿一个脉冲缩放的效果来说，如果动画直接加在最外层，所有层就一起变大变小，看着特呆板。但把动画分别加到每一层上，再给它们设置不同的延迟时间，那感觉就完全不一样了。.layer的延迟可以用calc(var(--n) * 0.3s)来算，这样从最底下到最上面，每层都晚那么零点几秒开始动。用:is选择器可以把最底下那个实心的span也带上，这样整个动画就像波浪一样，从底部传到顶部，动感十足。

给图层加点装饰

之前提到过，伪元素这玩意儿，最适合拿来搞装饰了。每层文字都能通过伪元素加点“私货”，比如简单的轮廓，或者画个小箭头。更骚的操作是，只给特定的几层加装饰。比如一共有二十四层，只想要最底下的十二层带上装饰，可以用:nth-child(-n + 12)这个选择器，精确锁定目标。这样一来，装饰就不会糊在最上面那层，影响文字本身的阅读。甚至还可以给这些伪元素加动画，整个一个3D“加载中”的文字，中间自带一个旋转的加载圈。搞这个效果时，从中间选了六到十八层，给它们的伪元素搞了个旋转动画，最底下那层文字还加了个模糊滤镜，看起来就像下面有层影子，效果一下就高级了。

给文字穿上花衣裳

不用伪元素，也能搞出花来。直接在顶层文字上动刀子，给它整点背景图或者渐变。用:last-child选中最上面那层，把文字颜色设成透明，背景色就能透出来，再用background-clip: text，就能做出文字内部是图案的效果。弄个条纹渐变，或者一圈一圈的径向渐变，看着跟定制字体似的。甚至可以直接用一张图片当背景，文字瞬间就变成贴图材质，想怎么玩都行。

让图案也动起来

给顶层加图案还不够嗨，给所有图层都加上图案，那才叫真·3D纹理。先给所有图层文字颜色设成透明，然后用--color存个颜色值。接着定义一个会动的棋盘格图案，用repeating-conic-gradient来搞，颜色就取那个--color，另一个用半透明黑。设置好background-size控制格子大小，再用background-clip: text让图案只显示在文字区域。最关键的一步，给这个背景图案加个动画，让它动起来，比如慢慢改变background-position。这样一来，整个3D文字就像被流动的棋盘格包裹住一样，视觉效果炸裂。

.layer {
  --n: calc(var(--i) / var(--layers-count));
  --color: hsl(200 30% calc(var(--n) * 100%));

  color: transparent;
  background-image:
    repeating-conic-gradient(var(--color) 0 90deg, hsl(0 0% 0% / 5%) 0 180deg);
  background-size: 0.2em 0.2em;
  background-clip: text;
  transform: translateZ(calc(var(--i) * var(--layer-offset)));
  animation: checkers 24s infinite linear;
}

@keyframes checkers {
  to { background-position: 1em 0.4em; }
}

可变字体的玩法

要是觉得普通字体不够骚，试试可变字体。这玩意儿自带很多可调属性，比如粗细、宽度、倾斜角度，甚至年份。像那个Climate Crisis字体，有个YEAR轴，从1979调到2025，字母会慢慢融化变小，配上分层效果，那视觉冲击力，真就一个“全球变暖”。还有Bitcount这种，可以按图层序号来调整字重，越往上越粗，看着就像一座座文字山峰拔地而起。最疯的是Kablammo，它那个MORF轴一调，整个字形都变了，再配合前面说的图层延迟动画，让每一层的变化时间错开，整个文字就像在变形金刚附体，动起来那叫一个骚。

换个思路玩位置

最后分享一个不太一样的动画思路。之前所有图层的位置，都是通过translateZ直接定死的。但如果把这个位移也做成动画，让每一层从起始位置慢慢移动到最终位置，并且每层都加上延迟，那就能看到一个从无到有、层层堆叠的3D效果。这个玩法更高级，需要配合复杂的延迟计算，适合用在一些比较特别的场景里，比如页面加载时，让文字从屏幕里“长”出来。

好家伙，这一波操作下来，原本静态的3D文字算是彻底活过来了。从简单的晃悠，到字母单飞，再到换皮变色，甚至用上可变字体，花样多到玩不过来。但这都还只是开胃菜，下一步，就该加入交互了，比如鼠标划过文字，它会跟着鼠标方向鼓起一个包，那种实时互动的快感，下一章接着整。

最新发布