SVG 文字描边动画，Done！

开发调优
1

效果演示

done

知识点

SVG 配合 CSS 实现，在动画帧中更改SVG 的 dash-array 与 dash-offset

代码

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 200">
  <text
    x="50%"
    y="80%"
    text-anchor="middle">
    DONE
  </text>
</svg>

text 中的 x、y表示绘制坐标，text-anchor=middle 定义文本字符串的中心位置为文本的初始位置，三个值 start | middle | end，可自行改动观察理解

svg {
  width: 800px;
  height: 200px;
}

text {
  font-size: 200px;
  letter-spacing: 4px;
  animation: spell 6s infinite alternate;
}

@keyframes spell {

  0%,
  10% {
    fill: rgba(31, 183, 127, 0);
    stroke: rgba(31, 183, 127, 1);
    stroke-width: 0.6;
    stroke-dasharray: 0 50%;
    stroke-dashoffset: 20%;
  }

  40% {
    fill: rgba(31, 183, 127, 0);
    stroke: rgba(31, 183, 127, 1);
    stroke-width: 1.2;
  }

  60% {
    fill: rgba(31, 183, 127, 0);
    stroke: rgba(31, 183, 127, 1);
    stroke-width: 1.8;
  }

  80% {
    fill: rgba(31, 183, 127, 0);
    stroke: rgba(31, 183, 127, 1);
    stroke-width: 2.4;
  }

  95%,
  100% {
    fill: rgba(31, 183, 127, 1);
    stroke: rgba(31, 183, 127, 0);
    stroke-width: 0;
    stroke-dasharray: 50% 0;
    stroke-dashoffset: -20%;
  }
}

就是一些SVG最基础的，直接手搓就行了。
可以在一些场景下使用使用，例如 404页面啥的 :smiling_face_with_three_hearts:

28 个赞
2

@user3 快看这是什么

OpenAI

4 个赞
3

随便玩玩，后面看看搞花哨点 :tieba_086:

3 个赞
4

鹅佬也很勤奋啊

3 个赞
5

css 也是C 你也是C 佬

3 个赞
6

你真的是太牛了

2 个赞
7

哈哈哈哈哈哈哈哈哈

2 个赞
8

我直接蹭zy热度！

1 个赞
9

什么时候打算用 CSS 做一个 Stripe 的打勾效果 :laughing:

2 个赞
10

这个Done就很zy

2 个赞
11

可怜的我，没有见过那个画面 :tieba_087:

1 个赞
12

我也没有啊啊啊

2 个赞
13

刚看至杨发了个DONE！灵机一动就把文字改了 :tieba_025:

1 个赞
14

可以先去至杨的练功券网站（ChatGPT Plus）:
https://buy.stripe.com/test_eVa15Ed0q77D6ze3cc
使用卡号 4242 4242 4242 4242
日期填写任意未来日期（如 12 / 34），CVC 填写任意 3 位数字。
邮箱、全名和地址等均可以随意填写；邮编填写任意 5 位数字。

3 个赞
15

甚至比zy多两个S级 :tieba_086:

3 个赞
16

啊？？这也行？

2 个赞
17

因为的确行，这是 Stripe 测试模式 :laughing:

2 个赞
18

我来了我来了

2 个赞
19

那得去学习一下！

3 个赞
20

很好，不错不错

4 个赞