今日收获-文字svg的获取以及svg文本和css动画结合

今天照样是仿写网站 ： 此网站

头部和底部都仿照写完了，开始首页的中间部分

今天完成的是加载动画，点击上面链接去他的网站看看就知道了

（一开始超难的，搞了半天效果比不上，最后去看的源代码才晓得如何实现的，不得不说，确实强，css动画部分我不会）

收获：

文字svg的获取：

在figma中输入文字，左侧选中元素，右击复制svg格式，即可得到文字svg

注意：输入文字用什么字体是有讲究的，会影响动画。这只是一个比较便捷的方式，还有其他的可以去了解

svg文本属性和css动画的结合：（就是今天要实现的效果了）

代码如下：（被我略微改动过的）

<h1>
  <div class="LogoSvg">
    <svg viewBox="0 0 800 150" preserveAspectRatio="xMidYMid meet">
      <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">
        <!-- 填写你想使用的文字 -->
        繁星点点
      </text>
    </svg>
  </div>
</h1>

<style>
  h1 {
    letter-spacing: -0.05em;
    display: flex;
    justify-content: center;
  }
  .LogoSvg {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    height: 150px;
  }

  svg {
    display: block;
    vertical-align: middle;
    width: 100%;
    height: 150px;
    overflow: visible;
  }

  text {
    font-family: "Long Cang", cursive;
    font-size: clamp(60px, 15vw, 150px);
    font-weight: 400; /* 强制正常字重 */
    fill: currentColor;
    fill-opacity: 0;
    stroke: currentColor;
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* 调整路径长度估算：4个汉字约20-22em，减少空跑时间 */
    stroke-dasharray: 22em;
    stroke-dashoffset: 22em;
    /* 动画：运笔延长至 10s，使用 ease-in-out 让速度更均匀；填充从 4s 开始 */
    animation:
      drawStroke 10s ease-in-out forwards,
      fillFadeIn 4s ease-out 4s forwards;
  }

  @keyframes drawStroke {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fillFadeIn {
    to {
      fill-opacity: 1;
    }
  }
</style>

css动画感觉很神奇，今天去了解svg的时候还看到canvas、webgl。

各种开场动画，啊啊啊啊，这个我也要学，太有意思了