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

概述

CSS动画提供了对HTML元素在页面上的移动。要实现绘画效果动画，我们需要在HTML中了解到svg元素、path元素，以及在CSS中了解动画和关键帧属性。由于svg元素提供了一个用于构建自定义图像的空间，可以使用元素插入。因此，要进行绘画动画，我们应该了解如何构建svg笔画。

svg路径元素具有以下数据点来构建笔画，这些数据点是：moveto (M), lineto (L), horizontal lineto (H), vertical lineto (V), curveto (C), smooth curveto (S), closepath (Z), elliptical Arc (A), quadratic bezier curve (Q) and smooth quadratic bezier curve (T)。数据点名称后面跟着括号名称，该名称将用于“d”属性来构建svg绘图。

方法1：绘制形状

算法

步骤1 − 在文本编辑器中创建一个HTML文件，并向HTML文件中添加HTML样板。

步骤2 − 现在在标签内创建一个svg元素的容器框，给svg元素添加一个viewbox属性。viewbox元素接受输入值作为x轴、y轴、宽度和高度。

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

步骤3 − 现在在svg元素中创建一个路径元素，该元素将包含用于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" />

第五步 − 还可以添加一些属性，如stroke、stroke−width和fill。

第六步 − 现在在head标签中添加style标签，如果需要的话，可以对布局进行样式化。

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

第7步 - 现在对路径元素进行定位，设置svg的stroke−dasharray和stroke dash−offset, 为绘制动画添加animation属性。

<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元素，并在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样板添加到HTML文件中。

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

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

第三步 - 在 body 标签内创建一个 svg 元素盒子容器，给 svg 元素添加一个 viewbox 属性。viewbox 元素接受 x-轴、y-轴、宽度和高度作为输入值。

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

步骤4 − 现在在svg元素中创建一个路径元素，它将包含用于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" />

第六步 − 还可以添加一些属性，如stroke、stroke−width和fill。

第七步 − 要添加更多文字的字母，请重复第2、3、4、5步。

第八步 − 现在将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-dashoffset，为绘制动画添加动画属性。

<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>