标签：笔画 svg ease stroke dasharray rgb 流动 text animation

背景：

前段时间着手某一项目时UI提出实现文字笔画流动效果的需求，故在github和gitee上寻找灵感，最后从一位学长的项目中找到了实现方法，感觉收获颇多，特此记录。

解决方案：

搭建svg基本的html结构：

<div class="container">
    <svg viewBox="0 0 1000 300">
      <symbol id="line-text">  <!--symbol用来创建模板，通过use实例化-->
        <text text-anchor="middle" x="50%" y="50%">ABCDEFG</text>
        <!--x和y指定锚点位置，text-anchor确定文本相对于锚点的对齐位置-->  
      </symbol>
      <!--以下四个use对应了每个文字中对应的四段虚线-->
      <use href="#line-text" class="text"></use>
      <use href="#line-text" class="text"></use>
      <use href="#line-text" class="text"></use>
      <use href="#line-text" class="text"></use>
    </svg>
  </div>  

通过css3动画实现文字笔画流动效果：

<style>
    .container {  /*svg外层容器*/
      height:150px;
      width:500px;
      margin:0 auto;
    }
    .text { /*内部填充fill和外轮廓stroke属于svg属性而非css，但css中text-fill开头和text-stroke开头的属性能够实现类似效果*/
      font-size: 140px;
      font-weight: bolder;
      fill: none;  /*文字内部填充为空*/
      stroke-width: 5;   /*外轮廓线的宽度*/
      stroke-dasharray: 0 240;  /*定义外轮廓虚线的长度和间隔的循环单位*/
    }

    /*定义动画*/
    @keyframes text1 {
      100% {
        stroke-dashoffset: 1000;
        stroke-dasharray: 60 180;
      }
    }
    @keyframes text2 {
      100% {
        stroke-dashoffset: 1060;
        stroke-dasharray: 60 180;
      }
    }
    @keyframes text3 {
      100% {
        stroke-dashoffset: 1120;
        stroke-dasharray: 60 180;
      }
    }
    @keyframes text4 {
      100% {
        stroke-dashoffset: 1180;
        stroke-dasharray: 60 180;
      }
    }

    /*调用动画*/
    .text:nth-child(4n + 1) {
      stroke: rgb(179, 157, 250);
      animation: text1 4s 1s ease-in-out forwards;
    }
    .text:nth-child(4n + 2) {
      stroke: rgb(198, 209, 79);
      animation: text2 4s 1s ease-in-out forwards;
    }
    .text:nth-child(4n + 3) {
      stroke: rgb(94, 167, 254);
      animation: text3 4s 1s ease-in-out forwards;
    }
    .text:nth-child(4n + 4) {
      stroke: rgb(107, 235, 203);
      animation: text4 4s 1s ease-in-out forwards;
    }
  </style>

学海无涯，长路漫漫啊

标签：笔画,svg,ease,stroke,dasharray,rgb,流动,text,animation
来源： https://blog.csdn.net/weixin_49227608/article/details/110505851

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。