SVG 文本动画项目教程

翁晔晨Jane

于 2024-08-20 09:00:08 发布

阅读量421

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00425/article/details/141342424

SVG 文本动画项目教程

svg-text-animateA Javascript library for convert texts to SVG stroke animations in the browser.项目地址:https://gitcode.com/gh_mirrors/sv/svg-text-animate

项目介绍

svg-text-animate 是一个基于 SVG 和 CSS 的开源项目，旨在帮助开发者创建动态的文本动画效果。该项目利用 SVG 的矢量特性以及 CSS 的动画功能，使得文本动画在各种设备上都能保持清晰和流畅。通过简单的配置和代码，开发者可以轻松地为网页添加引人注目的文本动画效果。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/oubenruing/svg-text-animate.git

使用

cd svg-text-animate

打开 index.html 文件，可以看到默认的 SVG 文本动画示例。
自定义 SVG 文本动画：

编辑 index.html 文件中的 SVG 元素，替换为你自己的文本内容。
修改 style.css 文件中的 CSS 样式，调整动画效果。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <svg id="animate" viewBox="0 0 1000 300">
        <text x="50%" y="50%" text-anchor="middle" dy=".35em">
            你好，世界！
        </text>
    </svg>
</body>
</html>

#animate text {
    font-size: 50px;
    fill: none;
    stroke: #000;
    stroke-width: 2px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear forwards;
}

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