如何使用 CSS 创建绘图效果动画

front end technologyjquerycss更新于 2025/2/11 1:16:17

概述

层叠样式表 (CSS) 动画使 HTML 元素在页面上移动。为了实现绘图效果动画，我们需要掌握 HTML svg 元素和 path 元素的知识;对于 CSS，我们还需要了解动画和关键帧属性。由于 svg 元素提供了构建自定义图像的空间，可以使用 <path> 元素插入该图像。因此，为了制作绘图动画，我们需要掌握构建 svg 描边的知识。

svg path 元素包含以下用于构建描边的点数据:moveto (M)、lineto (L)、horizontal lineto (H)、vertical lineto (V)、curveto (C)、smooth curveto (S)、closepath (Z)、椭圆弧 (A)、二次贝塞尔曲线 (Q) 和平滑二次贝塞尔曲线 (T)。点数据名称后跟括号名称，该名称将在"d"属性中用于构建 SVG 图形。

方法 1:绘制形状

算法

步骤 1 - 在文本编辑器中创建一个 HTML 文件，并将 HTML 样板添加到该文件中。

步骤 2 - 现在在 body 标签内创建一个 SVG 元素 box 容器，并为该 SVG 元素添加 viewbox 属性。viewbox 元素接受输入值作为 x 轴、y 轴、宽度和高度。

<svg viewBox="0 0 500 500"></svg>

步骤 3 − 现在创建一个指向 svg 元素的 path 元素，它将包含 svg 描边线的点数据。

<path class="path" fill="white" stroke="green"/>

步骤 4 − 现在创建 svg 数据点形状并将其添加到"d"属性

<path class="path" fill="white" stroke="green" stroke-width="40"
            d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" />

步骤 5− 您还可以添加一些属性，如描边、描边宽度和填充。

步骤 6− 现在将 style 标签添加到 head 标签，并在必要时为布局设置样式。

<style>
        h3 {
            text-align: center;
            color: green;
            font-family: 'Segoe UI';
        }
    </style>

步骤 7 − 现在定位路径元素并设置 svg 的 stroke-dasharray 和 stroke dash-offset，为绘图动画添加动画属性。

<style>
        .path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: drawing 5s linear forwards infinite;
        }
    </style>

步骤 8- 现在为上述路径元素创建的动画名称添加@keyframe属性

<style>
        .path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: drawing 5s linear forwards infinite;
        }

        @keyframes drawing {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>

步骤 9− 打开浏览器，绘图效果已成功创建

示例

我们将使用 svg 路径创建一个心形绘图效果。为此，请创建一个 svg 元素，并在其内部添加一个路径标签。该路径标签包含一个属性"d"，该属性将心形的点数据作为坐标。创建完成后，我们将使用动画属性，通过设置 stroke-dashoffset 的值来为路径元素添加动画效果。

<html>
<head>
    <style>
        h3 {
            text-align: center;
            color: green;
            font-family: 'Segoe UI';
        }

        .path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: drawing 5s linear forwards infinite;
        }

        @keyframes drawing {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
    <h3>tutorialspoint.com</h3>
    <svg viewBox="0 0 500 500" style="width:25%;display:block;margin:auto;">
        <path class="path" fill="white" stroke="green" stroke-width="40"
            d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" />
    </svg>
</body>
</html>

方法 2:绘制文本

算法

步骤 1 - 在文本编辑器中创建一个 HTML 文件，并将 HTML 样板添加到该文件中。

步骤 2 - 创建一个包含文本字母的父 div 容器。

<div class="drawing"></div>

步骤 3 - 现在在 body 标签内创建一个 svg 元素 box 容器，并为该 svg 元素添加 viewbox 属性。 viewbox 元素接受 x 轴、y 轴、宽度和高度作为输入值。

<svg viewBox="0 0 540 340"></svg>

步骤 4 − 现在创建一个指向 svg 元素的 path 元素，该元素将包含 svg 描边线的点数据。

<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"/>

步骤 5 − 现在创建 svg 数据点形状并将其添加到"d"属性。

<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
                d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />

步骤 6 − 您还可以添加一些属性，例如描边、描边宽度和填充。

步骤 7 − 要添加更多文本字母，请重复步骤 2、3、4、5。

步骤 8 − 现在将 style 标签添加到 head 标签，并在必要时为布局设置样式。

<style>
        h3 {
            text-align: center;
            color: white;
            font-family: 'Segoe UI';
        }

        .drawing {
            display: flex;
            padding-top: 2rem;
        }
    </style>

步骤 9− 现在定位路径元素并设置 svg 的 stroke-dasharray 和 stroke dash-offset，为绘图动画添加动画属性。

<style>
        .path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: dash 5s linear forwards;
        }
    </style>

步骤 10- 现在为上述路径元素创建的动画名称添加@keyframe 属性。

<style>
        .path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: dash 5s linear forwards;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>

步骤 11− 现在打开浏览器，绘图效果已成功创建。

示例

我们将使用文本名称创建绘图效果。为此，我们将按字母顺序将路径添加到路径元素中。

<html>
<head>
    <style>
        h3 {
            text-align: center;
            color: white;
            font-family: 'Segoe UI';
        }

        .drawing {
            display: flex;
            padding-top: 2rem;
        }

        .path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            animation: dash 5s linear forwards;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>

<body style="background-color: #0a0a0a;">
    <h3>tutorialspoint.com</h3>
    <div class="drawing">
        <svg viewBox="0 0 540 340">
            <path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
                d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
        </svg>
        <svg viewBox="0 0 540 340">
            <path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
                d="m 300 300  v -252 h 61 v 112 v -112 h 61 v 252" />
        </svg>
        <svg viewBox="0 0 540 340">
            <path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
                d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
        </svg>
        <svg viewBox="0 0 540 340">
            <path class="path" fill="#0a0a0a" stroke="white" stroke-width="20" d="m 300 300  v -256 l 90 256 v -256" />
        </svg>
    </div>
</body>
</html>