小编nb_*_*_ck的帖子

如何使用SVG为网页上的手写文字制作动画?

我正在尝试动画我创建并保存为SVG的文本.到目前为止,我只能为中风设置动画,但这并不是我想要实现的.以下是我需要的示例的链接:

.test {
  width: 300px
  /*   margin:0 auto; */
}

.l1 {
  animation: dash 15s 1;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
  /*fill: none;*/
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  -webkit-animation-delay: 1s;
  /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  -webkit-animation-delay: 2.5s;
  /* Chrome, Safari, Opera */
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s …
Run Code Online (Sandbox Code Playgroud)

css animation svg

5
推荐指数
1
解决办法
8364
查看次数

标签 统计

animation ×1

css ×1

svg ×1