作为设计师，如果能够用代码来实现一些动效，那真是极好的！
SVG这种图片格式今年来真是呈现一个越来越火的节奏，最近 “动效” 这个词非常的流行，产品们都恨不得能够在自己的所有产品上都加上炫目的动效，设计师们都恨不得在一夜之间都掌握所有制作动效的软件，而SVG的大热，或多或少都是拜这股洪流所赐。SVG与代码能打出非常好的配合，设计师们能够用简单的几行CSS代码就实现出许许多多动效，是的，再也不是做成GIF的“类动效”，而是实打实的代码实现的动效，并且真的非常简单。SVG除了能够很好配合你的CSS代码之外，还有许多别的优秀特性。
- 跨设备能力。 SVG的全名是（Scalable Vector Graphic），它是矢量的，也就是说无论你怎么东拉西扯，它总是能够保持自己最好的状态，无论在何种尺寸的状态下，无论在那种屏幕里面呈现，它都不会有一丁点模糊，现在响应式的产品是主流，天知道用户会用什么样的设备来使用你的东西。这回设计师爽了，直接输出拿给程序员们就好了，他再也再也不会回来找你了，真的我保证。
- 透明通道。 SVG是可透明的，好用得就像PNG的透明一样，完全健康、正常。光这一条就少了无数坑了。
- 小，小很多很多。 大家都知道GIF动画有时候会很大，这就让网页的载入时间变得很长很长，耗费用户太多的流量，要知道现在流量是多么的贵啊，要知道超过五秒的等待时间用户就会把你无情的关掉啊。而且巨大的GIF图片即使在加载完成之后也要耗费非常多的资源来一直进行渲染，这会让整个体验变得非常的卡顿，而且我认为嘛，设计师们应该要在某种程度上做到提升产品性能的能力。
- 可交互的。 因为我们能用CSS或者Javascript对它进行控制，而且这个非常简单。
这里必须声明的是，在下也才疏学浅，只能为大家列出这几条，SVG的优势或许还有别的许多。
立即学习“前端免费学习笔记（深入）”；
接下来为大家讲解一个用到了SVG和CSS的logo小动画，大家如果感兴趣的可以到我的[Github](https://github.com/zyxscientist/textAnimation)下载全部代码慢慢研究，希望看完这则教程之后你能够立刻用带自己的产品上面去。
See the Pen TextLogoAnimation by Zhuyxuan ( @Zyxscientist ) on CodePen .
看吧，真的非常短小精悍，总体积不过几k。
HTML部分:首先通过SVG的标签来设置蒙版，这里我们的蒙版是一行文字“Zyxscientist”。这里必须提到的是，我们必须要用来装下以及其之内的所有内容。如果不这样做的话，在某些浏览器中可能会出现动画无法正常运动的状况，在下也不知道为什么。
在一个内定义了六，用clip-path="url(#mask-path)"来指向我们上面用定义好的蒙版，所以我们这六个方块的蒙版就是"Zyxscientisit"这行字，只有经过这行子的区域，我们才能看得到我们的。
TURF（开源）权限定制管理系统（以下简称“TURF系统”），是蓝水工作室推出的一套基于软件边界设计理念研发的具有可定制性的权限管理系统。TURF系统充分考虑了易用性，将配置、设定等操作进行了图形化设计，完全在web界面实现，程序员只需在所要控制的程序中简单调用一个函数，即可实现严格的程序权限管控，管控力度除可达到文件级别外，还可达到代码级别，即可精确控制到
HTML部分总体来讲就是这么几种元素，然而配合CSS却可以做出视觉效果并不单调的动画效果，这里体现出了SVG在动画方面的可塑性。
CSS部分:我们大概可以把整个动画分为三个小部分（详见下面呈上来给大家的timeline）。 第一部分： 首先看到的是我们的蒙版“Zyxscientist”先保持静止不动，而线面的六个元素由初始状态开始进行时长4s的运动。我们在CSS中设置了这里六个方形的颜色，所以当动画开始，这六个元素路过蒙版的时候可以看到一个上色的效果。 第二部分： 让第二部分的动效反过来再放一遍，这是通过keyframes来设定的，我尝试过两个部分分开写，但是这会让它们之间存在一些微小的卡顿，将它们一次性写到同一个keyframes里面可以避免这样的情况发生，尽管这样会丧失一些灵活性。 第三部分： 我们开始让蒙版开向右运动，让蒙版和下面的元素重合的部分只剩下一个'Z'字母，以得到我们看见的最后的效果。
CSS部分稍微长一些，但是思路还是很简单的。
好了，见天的分享就到这里先啦,如果多人喜欢的话我会继续给大家分享更多关于SVG动画的东西。
重新提一下，你可以到我的 Github 上面直接下载这段代码，然后自己玩起来。
以后有新文章新作品跟大家分享，除了会首发到ui中国之外还会发布到最近自己搭建的 博客 之上，希望大家多来逛逛，多交流。
最后的最后，希望有大神能够指出上面代码写得naiev的地方。
