html矢量动画,一步步教你用HTML5 SVG实现动画效果

翻译：疯狂的技术宅

本文首发微信公众号：jingchengyideng

欢迎关注，每天都给你推送新鲜的前端技术文章

摘要

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

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

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

文件结构

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

:rose: mkdir note-display

:rose: cd note-display

:rose: touch index.html styles.css scripts.js

HTML

这是连接 css 和 js 文件的初始模板：

Note Display

每个note元素都包含一个列表项： li 用于保存 circle ， note 值及其 label 。

图：列出项元素及其直接子元素： .circle , .percent 和 .label

.circle_svg 是一个 SVG 元素，它包含两个 元素。 第一个是要填充的路径，第二个用来为动画作准备。

图：SVG元素：SVG包装器和圆形标签

注释分为整数和小数，所以可以把它们设定为不同大小的字体。 label 是一个简单的 。 把所有得这些元素放在一起看起来像这样：

0.

00

Transparent

cx 和 cy 属性定义圆的x轴和y轴中心点。 r 属性定义其半径。

你可能已经注意到类名中的下划线/破折号模式。 这是 BEM(block element modifier) ，分别代表 block , element 和 modifier 。 它是使元素命名更加结构化、有条理和语义化的一种方法。

为了完成模板结构，让我们将四个列表项包装在无序列表元素中：

图：无序列表包装器拥有四个 li 子元素

• 0.

  00

  Transparent

• 0.

  00

  Reasonable

• 0.

  00

  Usable

• 0.

  00

  Exemplary

你必须先问一下自己 Transparent 、 Reasonable 、 Usable 和 Exemplary 标签都代表什么意思。 随着你对编程的不断熟悉