使用CSS创建SVG动画-DEV365 开发者社区

作为新软件开发人员，我总是想知道如何使我的网站和应用程序更加令人兴奋。在我有机会查看的所有酷网站中，所有这些网站无疑都有某种动画来真正吸引访客的注意。在网络上查看时，我偶然发现了SVG动画的力量！学习和开始不仅容易学习，而且可能性也无尽，纯粹符合您的想象力！

什么是SVG？

svg，可伸缩矢量图形的缩写，是

基于文本的打开Web标准，用于描述可以在任何尺寸
的情况下呈现的图像

from https://developer.mozilla.org/en-US/docs/Web/SVG
引用意思是，无论我们希望图像是多大或小的，我们总是会拥有高质量，酥脆清洁的图像！在我们希望将图像扩展到比原始大小的同时保持其质量的情况下，这是非常有用的。

。

如何入门：

首先，我们必须获取我们的SVG文件才能使我们动画。有很多方法可以获取SVG文件，例如undraw.co和freesvg.org，或者您可以自己在Figma上创建自定义SVG文件。
一旦您获得了一个SVG文件，就可以跳到无花果并创建一个新的设计文件。通过简单地将SVG文件直接拖动到工作空间来导入您的SVG文件。
在无花果中，您只需单击它们即可选择单个向量/元素，如果要选择多个项目，则可以在单击它们时保持Shift。此外，您还可以选择侧栏上的项目！要在侧栏上选择多个项目，请按住CMD键，然后左键单击这些项目。一旦选择了几个项目，就可以使用CMD + G或CTRL + G一起将它们分组在一起。分组最终允许我们以后完全对一组项目进行动画，以便当我们使用SVG文件时，将组织所有内容在我们的代码编辑器中。
一旦分组，您就可以给分组的项目一个新名称，因此更容易识别这些组。只需单击侧栏上的“组”名称并编辑文本。当您对要动画的项目进行分组时，只需以SVG格式导出文件，并确保检查出导出的两个选项。

转到您的HTML和CSS文件：

继续，将导出的SVG文件的内容复制并粘贴到您的HTML车身标签中！ SVG代码看起来很长而凌乱，这是完全正常的！代码看起来像这样：

<svg width height viewBox fill xlmns>
<g id="name of the svg file">
<path />
<path />
<path />
....
<path />
<g/>
</svg>

在整个代码中，您在上一步中创建的组应具有一个具有ID的G标签。

<g id="group-name">

现在，我们在HTML文件中拥有SVG文件，我们可以开始使用CSS修改其在浏览器上的外观！

在此示例中，我们只将动画添加到手机中心的检查符号。我们可以使用创建的ID标签直接定型检查符号。这是一个非常简单的动画：

* {
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}

svg {
   margin-top: 10%;
}

#Check {
  animation: checkAnimation 5s ease infinite;
}

@keyframes checkAnimation {
  0% {
    opacity: 0;
    translate: 0 -20%;
  }

  30% {
    opacity: 1;
    translate: 0 0;
  }
}

通过使用检查符号的ID，我们可以为组专门添加动画样式。 “ checkAnimation”的关键帧基本上描述了我们检查符号期间的动画过程。
在这种情况下，该符号将在前1.5秒内逐渐消失，并且在出现时，它将从上到下逐渐减少。

和瞧！我们有SVG动画！

授予这是一个非常非常简单的动画，但是既然您已经了解了如何创建SVG动画的基础知识，则可以开始探索和尝试所有其他动画和效果！

这里有一些其他资源来帮助您的SVG动画旅程！

svg repo-免费的SVG矢量和图标
undraw-免费SVG图形
Haikei-免费的自定义SVG模式，可以用作创意页面分隔板
Shape Divider应用程序 - 免费自定义SVG分隔发电机