前端实现炫酷动效_程序员必备！12个狂拽炫酷吊炸天的动效神器

动效顾名思义就是动画效果。网页中为什么需要动效呢？简单来说就是为了有趣。现如今，纯粹静态的网站越来越少，动态的网站是大势所趋。而且动效现在已经无处不在了。有的动效可能是一个微妙的悬停效果，有的则是使用引人瞩目的动态渐变背景抓住用户的眼球，这些动画就和字体、导航、图标一样， 是如今 UI 界面当中不可或缺的组成部分。如果你仍然抱着侥幸心理，认为动效只是暂时的趋势，过一阵子就会消失，那就大错特错了。

如果把网页和用户的关系比做正在恋爱的情侣，很显然网页的 UI 是颜值，而动效在我看来则是情侣之间的小浪漫。可能和颜值比起来，浪漫似乎并不是那么的重要，但是如果感情中没有了浪漫，是不是会觉得少了点什么呢？那么动效就可以比喻他是一种网页和用户之间的浪漫。这种浪漫可以没有，但有一定是为了让用户更爽。而用户爽了就自然愿意为你的产品买单，也是用户体验的粘合剂，增强了用户界面的可访问性，让界面更易于被理解。如果我的这个假设成立，那么动效就变成了一道爱情题。和所有爱情问题一样，模仿一定是最简单的捷径，今天我们不推荐设计类的动效设计工具，推荐一些给前端小哥哥的福利，本期筛选了一推炫酷的CSS、JS炫酷动效在线下载网站，走起~

BTTN.CSS

https://bttn.surge.sh/

CSS 能实现很不多不同的样式，只有你想不到，没有做不到哦，今天为大家分享的 bttn.css 是一个专注分享网页按钮的样式库，设计师和前端人员可以参考这个设计，也能直接拿来使用。

按钮尺寸

按钮颜色

使用方法也相当简单，引入 CSS样式后，直接在填写对就的class名称即可

Hover Buttons

https://varin6.github.io/Hover-Buttons/

一个可以生成代码的网站，选好你想要的样式，下方就会生成相对应的前端代码，一键复制是不是很省事？

Granim.js

https://sarcadass.github.io/granim.js/

这是一款基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案，使指定元素在这些颜色中执行平滑的渐变色过渡效果。

Micron

https://webkul.github.io/micron/

micron.js是一款可生成炫酷CSS3动画的js动画库插件。通过micron.js插件，你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。

Blotter.js

https://blotter.js.org/

像 Blotter.js 这样神奇的动效还是会时不时地给我带来惊喜，留下深刻的印象。但是总的来说，良好的用户体验始终是非常重要的。网站显示内容的时候，它应该持续地吸引用户，让用户保持兴趣。

PROGESS BAR

https://kimmobrunfeldt.github.io/progressbar.js/

ProgressBar.js 是一个借助动态 SVG 路径的漂亮的，响应式的进度条效果。

使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条，圆形和方形等几个内置的形状，但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。

Second-Hamburger-Helper

https://codepen.io/KPCodes/pen/Ypwrdx

Second-Hamburger-Helper，这个其中包括十几个非常可爱汉堡图标和相应的动效。即便最简单的三个小横杠构成的图标和交叉的关闭图标之间的动效，也可以这么丰富多彩，这种发现的愉悦会让人感受到一种别样的舒适感。

Hamburgers

https://jonsuh.com/hamburgers/

Hamburgers是一款效果超酷的图标变形动画特效CSS3动画库。包括18种不同的变形动画效果，你还可以通过Sass文件来自定义你自己的图标变形动画。

JQuery DrawSVG

http://leocs.me/jquery-drawsvg/

Jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画，其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。它适用于矢量元素，借此创建出独特的视觉效果。而且属于轻量级，压缩后小于2kb同时支持Easing过渡动画效果！

Moving Letters

https://tobiasahlin.com/moving-letters/

Moving Letters 则是 Tobias Ahlin 的个人项目，它提供了16种基于文本和字体的动画效果，你只需要复制代码粘贴到你的网站里面，就能够重现出相应的效果。如果你需要做个性的页面或个人作品集网页时，我想这这16个动画文字效果你会用得上。

Tilt.js

http://gijsroge.github.io/tilt.js/

Tilt.js 是一个非常小的插件，用来创建微妙但是引人瞩目的视差效果，而 Pixel Wave 则可以将像素变成博朗，带来时尚非常的几何元素氛围。

3D Lines

http://joanclaret.github.io/html5-canvas-animation/

3D Lines则是基于 Three.js 的解决方案。它可以创建不断变化的颜色和线条，风格现代而视觉感十足。

Decorative Letter Animations

https://tympanus.net/codrops/2018/01/10/decorative-letter-animations/

来自专业人事的动效工具真的能够让你的网页和产品拥有截然不同的视觉效果，尤其是像 Mary Lou 这样的高手所创建的工具。你可以看看 Decorative Letter Animations 和 Glitch Effect 这两篇文章，其中都包含了非常突出的展示，清新而时尚。当然，这些代码和工具的缺陷在于……过于先锋，对于浏览器兼容性有着极高的要求。但是这不会是不可逾越的障碍，因为浏览器会越来越先进，性能越来越强。

后 记

透过动效，我们希望用户也能够感受到我们的真诚与善意，不求能与用户天长地久，只求用户能在我们这个书的城堡中有一场浪漫的旅程。赶快推荐给坐旁边的程序员小哥哥吧，至少你这一小小举动能让他少掉两根秀发。同时也希望你或多或少Get到了一些知识面，相信网页动效的操作会为你带来更丰富的冲浪体验，下期见~