使用 SVG 图像的文本动画

什么是SVG?

SVG 代表可缩放矢量图形。它是一种基于 XML 的图像格式。它创建可以组合成二维图形的不同几何形状。

我们将使用 SVG 图像来创建文本动画效果。 SVG 图像可以从互联网上下载，也可以使用 Figma、Adobe Illustrator 或 XD 等软件创建自定义 SVG 图像。

先决条件：

• HTML
• CSS
• JavaScript

方法：

• 创建一个名为 index.html 的 HTML 文件。现在创建一个 SVG 图像或从 Internet 下载它。创建一个 svg 元素，复制图像的路径并将其粘贴到 index.html 文件中。
• 创建一个名为styles.css 的CSS 文件并将其链接到HTML 文件。
• 在 CSS 文件中，将nth-child属性应用于 svg 元素的路径元素。对于每个孩子，我们将使用两个属性stroke-dasharray 和中风-dashoffset 。这两个属性的值将等于相应子项的路径长度。
• 路径的总长度可以在 JavaScript 的帮助下计算。因此，创建一个名为 app.js 的文件并将其与 HTML 文件链接。
• 对路径元素应用循环并使用getTotalLength()函数获取每个路径的总长度。
• 使用@keyframes 规则为文本创建动画。

下面是上述方法的实现：

HTML 布局：

CSS 样式：

CSS

*{  
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
  
body{
    width: 100vw;
    height: 100vh;
    background: rgb(32,35,48);
    display: flex;
    justify-content: center;
    align-items: center;
}
#logo{
    animation: fill 0.5s ease forwards 4s;
}
  
#logo path:nth-child(1){
    stroke-dasharray: 743;
    stroke-dashoffset: 743;
    animation: anims 2s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray: 501;
    stroke-dashoffset: 501;
    animation: anims 2s ease forwards  0.3s;
      
}
#logo path:nth-child(3){
    stroke-dasharray: 501;
    stroke-dashoffset: 501;
    animation: anims 2s ease forwards 0.6s;
      
}
#logo path:nth-child(4){
    stroke-dasharray: 683;
    stroke-dashoffset: 683;
    animation: anims 2s ease forwards 0.9s;
      
}
#logo path:nth-child(5){
    stroke-dasharray: 454;
    stroke-dashoffset: 454;
    animation: anims 2s ease forwards 1.2s;
      
}
#logo path:nth-child(6){
    stroke-dasharray: 554;
    stroke-dashoffset: 554;
    animation: anims 2s ease forwards 1.5s;
      
}
#logo path:nth-child(7){
    stroke-dasharray: 549;
    stroke-dashoffset: 549;
    animation: anims 2s ease forwards 1.8s;
      
}
#logo path:nth-child(8){
    stroke-dasharray: 680;
    stroke-dashoffset: 680;
    animation: anims 2s ease forwards 2.1s;
      
}
#logo path:nth-child(9){
    stroke-dasharray: 743;
    stroke-dashoffset: 743;
    animation: anims 2s ease forwards 2.4s;
      
}
#logo path:nth-child(10){
    stroke-dasharray: 501;
    stroke-dashoffset: 501;
    animation: anims 2s ease forwards 2.7s;
      
}
#logo path:nth-child(11){
    stroke-dasharray: 501;
    stroke-dashoffset: 501;
    animation: anims 2s ease forwards 3.0s;
      
}
#logo path:nth-child(12){
    stroke-dasharray: 683;
    stroke-dashoffset: 683;
    animation: anims 2s ease forwards 3.1s;
      
}
#logo path:nth-child(13){
    stroke-dasharray: 454;
    stroke-dashoffset: 454;
    animation: anims 2s ease forwards 3.1s;
      
}
  
@keyframes anims{
    to{
        stroke-dashoffset: 0;
    }
}
  
@keyframes fill{
    from{
        fill: transparent;
    }
    to{
        fill: #308D46;
    }
}

JavaScript 代码：

Javascript

const logo = document.querySelectorAll('#logo path');
  
// Loop to calculate length of path
logo.forEach((logos) => {
    console.log(logos.getTotalLength());
})

输出：