数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 创建绘图效果动画
概述
层叠样式表 (CSS) 动画为页面上的 HTML 元素提供了运动效果。为了实现绘图效果动画，我们需要预先了解 HTML svg 元素、path 元素，以及 CSS 中的动画和关键帧属性。由于 svg 元素提供了一个构建自定义图像的空间，可以使用 <path> 元素插入。因此，要制作绘图动画，我们应该掌握构建 svg 描边的知识。
svg path 元素具有以下用于构建描边的点数据：移动到 (M)、线条到 (L)、水平线条到 (H)、垂直线条到 (V)、曲线到 (C)、平滑曲线到 (S)、闭合路径 (Z)、椭圆弧 (A)、二次贝塞尔曲线 (Q) 和平滑二次贝塞尔曲线 (T)。点数据名称后面跟着括号名称，该名称将在“d”属性中使用以构建 svg 绘图。
方法 1：绘制形状
算法
步骤 1 - 在文本编辑器中创建一个 HTML 文件，并将 HTML 基本结构添加到 HTML 文件中。
步骤 2 - 现在在 body 标签内创建一个 svg 元素框容器，向 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 - 您还可以添加一些属性，如 stroke、stroke-width 和 fill。
步骤 6 - 现在将 style 标签添加到 head 标签中，并在必要时对布局进行样式设置。
<style>
h3 {
text-align: center;
color: green;
font-family: 'Segoe UI';
}
</style>
步骤 7 - 现在定位 path 元素，并设置 svg 的 stroke-dasharray 和 stroke-dash-offset，为绘图动画添加 animation 属性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
</style>
步骤 8 - 现在为上面 path 元素创建的动画名称添加 @keyframe 属性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
@keyframes drawing {
to {
stroke-dashoffset: 0;
}
}
</style>
步骤 9 - 打开浏览器，绘图效果成功创建。
示例
我们将使用 svg path 创建一个心形绘图效果。因此，要构建它，请创建一个 svg 元素并在 svg 标签内添加一个 path 标签，path 标签有一个“d”属性，它将心形的点数据作为坐标。创建完成后，我们将使用 animation 属性通过设置 stroke-dashoffset 的值来为 path 元素设置动画。
<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>
步骤 3 - 现在在 body 标签内创建一个 svg 元素框容器，向 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 - 您还可以添加一些属性，如 stroke、stroke-width 和 fill。
步骤 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 - 现在定位 path 元素，并设置 svg 的 stroke-dasharray 和 stroke-dash-offset，为绘图动画添加 animation 属性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
</style>
步骤 10 - 现在为上面 path 元素创建的动画名称添加 @keyframe 属性。
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
步骤 11 - 现在打开浏览器，绘图效果成功创建。
示例
我们将使用文本名称创建绘图效果。为此，我们将逐个字母地将路径添加到 path 元素中。
<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>
结论
如上例所示，我们使用了 stroke、stroke-width 和 fill 属性，因此 stroke 属性表示绘图的颜色，我们可以通过向其中添加颜色值来自定义其颜色，stroke-width 表示绘图的宽度，fill 属性表示绘图组件内部的颜色。此绘图功能用作网页设计的图形元素。
587 次浏览
