纯css字体流动动画

日结五百块

已于 2023-06-28 02:26:14 修改

阅读量1.3k

点赞数 3

文章标签： css 前端

于 2023-06-28 02:13:50 首次发布

本文链接：https://blog.csdn.net/m0_74097396/article/details/131427340

版权

文章介绍了如何利用SVG和CSS动画来创建一个加载页面的效果。通过stroke-dasharray和stroke-dashoffset属性实现文字流动动画，并通过@keyframes设计填充颜色。提供了具体的SVG代码示例和关键步骤，强调了路径周长计算以及动画时间控制的重要性。

摘要由CSDN通过智能技术生成

前言：

最近做了个加载页面，其中有用到了这一个功能，本着好东西齐分享的原则，我撰写了这篇博客。
补充：经过搜索，相关的内容已经显现冗余的态势，如果有快消需求的话，请转往高赞高浏览的博客，笔者的能力有限，还望谅解。

1.代码及效果展示：

效果图
一个描边动画
（由于录制工具有帧数限制，实际效果要更加流畅饱满）

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体描边</title>
</head>

<style>
    body {
        position: relative;

    }

    svg {

        position: absolute;
        top: 300px;
        left: 550px;
        animation: fill-in 2s ease forwards 800ms;

    }

    .logo path:nth-child(1) {
        /* 流动动画的关键标签，间距跟位移 */
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        animation: line-run 2s ease forwards;


    }

    .logo path:nth-child(2) {
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        animation: line-run 2s ease forwards;


    }

    .logo path:nth-child(3) {
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        animation: line-run 2s ease forwards;


    }

    .logo path:nth-child(4) {
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        animation: line-run 2s ease forwards;


    }

    /*  让字体流动 */
    @keyframes line-run {
        to {
            stroke-dashoffset: 0;

        }
    }

    /* 填充颜色 */
    @keyframes fill-in {

        from {
            fill: transparent;
        }

        to {
            fill: #040711;
        }



    }
</style>

<body>
    <svg class="logo" id="logo" width="379" height="92" viewBox="0 0 379 92" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <!-- 一个path代表这一个汉字 -->
        <path
            d="M33.272 15.184H90.296V21.808H33.272V15.184ZM46.712 1.45599H53.624V34.384H46.712V1.45599ZM70.712 1.45599H77.72V34.384H70.712V1.45599ZM37.592 38.608H86.84V89.104H79.928V45.04H44.12V89.584H37.592V38.608ZM41.144 58.288H83.192V64.624H41.144V58.288ZM41.336 78.16H83.288V84.592H41.336V78.16ZM58.616 41.488H65.24V82.672H58.616V41.488ZM1.592 52.432C8.984 50.416 20.12 46.96 30.872 43.6L31.832 50.128C21.944 53.488 11.576 56.848 3.512 59.44L1.592 52.432ZM2.936 20.752H31.544V27.472H2.936V20.752ZM14.552 1.45599H21.272V80.752C21.272 84.688 20.408 86.608 18.008 87.76C15.8 88.912 12.056 89.104 5.912 89.104C5.72 87.376 4.856 84.4 3.896 82.384C8.12 82.48 11.768 82.48 12.92 82.48C14.168 82.48 14.552 82.096 14.552 80.656V1.45599Z"
            stroke="black" stroke-width="2" />
        <path
            d="M127.832 18.544H179.192V25.552H127.832V18.544ZM176.024 18.544H183.32C183.32 18.544 183.32 21.04 183.32 22.096C181.88 54.64 180.632 66.352 177.272 70.288C175.352 72.688 173.24 73.456 169.976 73.744C167 74.032 161.528 73.936 156.248 73.648C156.056 71.44 155.096 68.368 153.752 66.352C159.512 66.832 164.888 66.832 167.096 66.832C168.824 66.832 169.88 66.64 170.936 65.584C173.432 62.8 174.872 51.088 176.024 19.984V18.544ZM148.088 2.79999H155.672C154.904 33.232 153.176 59.44 130.232 73.936C129.08 72.208 126.872 69.904 124.952 68.56C146.744 55.696 147.512 31.12 148.088 2.79999ZM118.808 34V75.088H111.608V41.008H98.936V34H118.808ZM102.776 6.83199L108.344 2.79999C113.72 7.59999 120.248 14.32 123.512 18.736L117.56 23.344C114.584 18.832 108.152 11.824 102.776 6.83199ZM115.064 70.192C118.232 70.192 120.536 73.168 126.104 76.624C132.536 80.752 140.888 81.52 152.216 81.52C164.024 81.52 178.808 80.656 188.408 79.6C187.544 81.52 186.296 85.36 186.2 87.664C179.384 88.048 161.624 88.72 151.928 88.72C139.352 88.72 131.288 87.568 124.28 83.248C120.344 80.56 116.984 77.104 114.872 77.104C111.8 77.104 107.288 83.152 102.68 89.872L97.304 82.96C103.832 75.472 110.168 70.192 115.064 70.192Z"
            stroke="black" stroke-width="2" />
        <path
            d="M239.672 23.536H278.168V30.448H239.672V23.536ZM274.616 23.536H281.72C281.72 23.536 281.624 26.224 281.624 27.184C280.376 66.832 279.224 80.368 275.864 84.592C273.944 87.184 272.024 87.952 268.856 88.336C265.88 88.624 260.696 88.528 255.608 88.24C255.416 86.128 254.648 83.152 253.304 81.136C258.776 81.616 263.768 81.616 265.88 81.616C267.512 81.712 268.568 81.424 269.624 80.272C272.216 77.2 273.56 63.376 274.616 25.168V23.536ZM253.592 3.088H260.696C260.504 36.496 260.024 71.152 240.536 89.584C239.288 87.952 236.792 85.552 234.968 84.4C253.4 67.504 253.496 34.48 253.592 3.088ZM199.544 9.232H236.696V15.76H199.544V9.232ZM196.088 32.176H238.424V38.704H196.088V32.176ZM224.408 48.688L230.264 47.056C234.008 55.6 238.328 67.12 240.056 73.744L233.72 75.952C232.088 69.136 227.96 57.424 224.408 48.688ZM199.544 77.872L198.968 71.824L202.616 69.232L234.104 62.608C234.296 64.528 234.776 67.312 235.064 68.848C205.496 75.472 201.848 76.528 199.544 77.872ZM199.544 77.872C199.16 76.336 198.008 72.976 197.24 71.152C198.776 70.672 200.024 68.176 201.656 64.432C203.096 60.976 207.992 47.152 210.296 34.672L217.304 36.88C214.328 49.744 209.432 63.856 204.536 73.744V73.84C204.536 73.84 199.544 76.336 199.544 77.872Z"
            stroke="black" stroke-width="2" />
        <path
            d="M299.384 76.816H370.52V83.728H299.384V76.816ZM292.472 7.69599H377.432V14.512H292.472V7.69599ZM295.448 24.112H302.456V89.68H295.448V24.112ZM367.64 24.112H374.744V89.392H367.64V24.112ZM330.968 9.80799H338.264V28.336H330.968V9.80799ZM331.448 27.76H337.784V65.776H331.448V27.76ZM317.72 49.648V62.224H351.608V49.648H317.72ZM317.72 31.312V43.792H351.608V31.312H317.72ZM311.576 25.168H357.944V68.368H311.576V25.168Z"
            stroke="black" stroke-width="2" />
    </svg>

</body>

</html>

2.实现过程:

1.SVG 标签:

在动画的实现过程中，SVG是由figma绘制完成的，所以我们只需要知道，SVG是一种不同与GIF，PNG的新图像格式即可。

为了加强理解，这里我贴上w3c里SVG的相关解释。
在这里插入图片描述
< path >标签隶属于SVG形状，在代码中有出现，复杂性很高，这里同样贴上解释。

在这里插入图片描述

2.figma绘制SVG

1
看不到的话，也解释不了
当文本输入完成时，一定要右键点击Outline stroke，这一步很关键。

看不到是真的没办法
跟据图示，修改并适当调整自己的样式即可。

在这里插入图片描述
这里要以SVG的格式复制，然后便可直接在vscode中使用了。

3.关键代码

 .logo path:nth-child(1) {
        /* 流动动画的关键标签，间距跟位移 */
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        animation: line-run 2s ease forwards;
    }

stroke-dasharray:
用于创建虚线，后面跟的是array，因为值是数组。
stroke-dashoffset： offset：
偏移的意思。

这里的数值大小由path的周长来决定，数值可以略大。主要是为了字体完全偏移到不可视区。

可以根据以下代码来获取path的周长。

<script>
    const logo = document.querySelectorAll('.logo path');
    for (let i = 0; i < logo.length; i++) {
        console.log(`${i}：${logo[i].getTotalLength()}`);
    }</script>

运行后，在控制台，即可的到数值。

b.
动画的设计思路是，先由a所展示的样式，使文字不可视，然后再将其改回原位。也就是将偏移改回0。

  /*  让字体流动 */
    @keyframes line-run {
        to {
            stroke-dashoffset: 0;

        }
    }

    /* 填充颜色 */
    @keyframes fill-in {

        from {
            fill: transparent;
        }

        to {
            fill: #040711;
        }

到这里，要点基本上可以说完成了，但还要注意的是，在描绘path动画的间隔时，要控制好时间，主观的去把握。

后话：

SVG的可操作性不仅仅是如此，你的脑洞多大，按道理来讲，它的功能就有多大。

笔者还是萌新，撰写到这里，确实感受到了自己笔力的缺乏，如果本文有什么问题的话，请务必告诉我。感谢指正，也感谢你能看到这里。

日结五百块

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
纯css字体流动动画

最近做了个加载页面，其中有用到了这一个功能，本着好东西齐分享的原则，我撰写了这篇博客。补充：经过搜索，相关的内容已经显现冗余的态势，如果有快消需求的话，请转往高赞高浏览的博客，笔者的能力有限，还望谅解。
复制链接

扫一扫