在纯 CSS 中为 SVG 徽标制作动画
在纯 CSS 中为 SVG 徽标制作动画
在本文中，我将向大家展示我是如何为我的个人网站创建动画徽标的 https://weshuber.com / 带有一个简单的 SVG 插图和一些 CSS 动画。
首先，您需要创建一个 SVG。为此，我使用了 Adobe Illustrator，但您也可以找到免费的在线工具，例如 https://www.svgator.com/ 您可以在其中免费创建 SVG。 SVGator 在他们的专业计划中提供动画，但不用担心，只需创建您的基本形状并导出静态 SVG，我们稍后会自己制作动画。
对于我的 SVG，我创建了一个五边形，里面有我的姓名首字母。对于动画，元素越简单/越少 - 动画越容易和基本。
一旦你有你导出的 .svg 文件，在你最喜欢的代码编辑器中打开它——我使用 Visual Studio Code——或者只是在 textEdit (mac) 或记事本 (windows) 中打开文件。您也可以在 CodePen 中打开它！
您会看到一堆 XML，具体取决于导出文件的软件——这可能有点令人困惑。花一些时间来格式化 XML（使用制表符和 ENTER 键）并使其可读。
你应该看到一些
在我的例子中，“d”类是五角形，“e”是其中的两个首字母 WH。
为了制作动画，我使用了 CSS 关键帧以及 stroke-dasharray 和 stroke-dashoffset 属性。这两个属性给出了五边形效果的“绘图”。我必须使用这两个值才能让它在我想要的地方开始和结束。
有关 stroke-dasharray 和 stroke-dashoffset 的更多信息，请在此处查看有用的文章： https://www.cassie.codes/posts/creating-my-logo-animation/
CSS 动画属性“draw”和“fadeIn”在我的 CSS 代码中进一步定义。
中风-dashoffset：0；使五边形的“笔画”线再次完整。 fadeIn 用于将首字母从 0 引入到 100 不透明度。
就是这样！这是一个非常简单的动画，但很有用，而且看起来不错。如果本教程对您有所帮助，您可以给我买杯咖啡表示感谢 😃 https://www.buymeacoffee.com/wesleyhuber
如果有任何改进或遇到麻烦，请在评论中告诉我！
谢谢大家阅读，平安！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
