一步步教你用HTML5 SVG实现动画效果

翻译：疯狂的技术宅
原文：https://www.smashingmagazine....

本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章

摘要
在这篇文章中你将了解Awwwards网是怎样实现动画的。 本文介绍了HTML5 SVG中的circle 元素，它的stroke属性，以及如何使用CSS变量以及用 Vanilla JavaScript 为它们设置动画。

SVG是一种基于XML的，用于定义缩放矢量图形的标记语言。 它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。 此外你还可以通过在这些路径上添加动态属性（例如笔触，颜色，粗细，填充等）来生成动画。

从2017年4月起，CSS Level 3 填充和描边模块开始支持从外部样式表设置SVG颜色和填充图案，而不是在每个元素上设置属性。 在本教程中，我们将会使用简单的纯十六进制颜色，不过填充和描边属性也支持图案，渐变和图像作为值。

注意：访问Awwwards网站时，你需要把浏览器宽度设置为1024px或更高的才能更好的查看动画显示。

• 演示链接
• 源代码

文件结构

让我们从在终端中创建文件开始：