動效顧名思義就是動畫效果。網(wǎng)頁中為什么需要動效呢？簡單來說就是為了有趣。現(xiàn)如今，純粹靜態(tài)的網(wǎng)站越來越少，動態(tài)的網(wǎng)站是大勢所趨。而且動效現(xiàn)在已經(jīng)無處不在了。有的動效可能是一個微妙的懸停效果，有的則是使用引人矚目的動態(tài)漸變背景抓住用戶的眼球，這些動畫就和字體、導航、圖標一樣， 是如今 UI 界面當中不可或缺的組成部分。如果你仍然抱著僥幸心理，認為動效只是暫時的趨勢，過一陣子就會消失，那就大錯特錯了。
如果把網(wǎng)頁和用戶的關系比做正在戀愛的情侶，很顯然網(wǎng)頁的 UI 是顏值，而動效在我看來則是情侶之間的小浪漫。可能和顏值比起來，浪漫似乎并不是那么的重要，但是如果感情中沒有了浪漫，是不是會覺得少了點什么呢？那么動效就可以比喻他是一種網(wǎng)頁和用戶之間的浪漫。這種浪漫可以沒有，但有一定是為了讓用戶更爽。而用戶爽了就自然愿意為你的產(chǎn)品買單，也是用戶體驗的粘合劑，增強了用戶界面的可訪問性，讓界面更易于被理解。如果我的這個假設成立，那么動效就變成了一道愛情題。和所有愛情問題一樣，模仿一定是最簡單的捷徑，今天我們不推薦設計類的動效設計工具，推薦一些給前端小哥哥的福利，本期篩選了一推炫酷的CSS、JS炫酷動效在線下載網(wǎng)站，走起~
BTTN.CSS
CSS 能實現(xiàn)很不多不同的樣式，只有你想不到，沒有做不到哦，今天為大家分享的 bttn.css 是一個專注分享網(wǎng)頁按鈕的樣式庫，設計師和前端人員可以參考這個設計，也能直接拿來使用。
按鈕尺寸
按鈕顏色
使用方法也相當簡單，引入 CSS樣式后，直接在填寫對就的class名稱即可
Hover
一個可以生成代碼的網(wǎng)站，選好你想要的樣式，下方就會生成相對應的前端代碼，一鍵復制是不是很省事？
.js
這是一款基于的背景顏色漸變動畫插件。該插件通過配置幾組不同的顏色方案，使指定元素在這些顏色中執(zhí)行平滑的漸變色過渡效果。
.js是一款可生成炫酷CSS3動畫的js動畫庫插件。通過.js插件網(wǎng)頁上的按鈕點不動，你可以為頁面的任意DOM元素添加12種炫酷CSS3動畫效果。并能通過js代碼或html5 data屬性來串聯(lián)各種CSS3動畫效果。
.js
像 .js 這樣神奇的動效還是會時不時地給我?guī)眢@喜，留下深刻的印象。但是總的來說，良好的用戶體驗始終是非常重要的。網(wǎng)站顯示內(nèi)容的時候，它應該持續(xù)地吸引用戶，讓用戶保持興趣。
.js 是一個借助動態(tài) SVG 路徑的漂亮的，響應式的進度條效果。使用 .js 可以很容易地創(chuàng)建任意形狀的進度條。這個 庫提供線條，圓形和方形等幾個內(nèi)置的形狀，但你可使用 或任何其它的矢量圖形編輯器創(chuàng)建自己的進度條效果。
--
--，這個其中包括十幾個非常可愛漢堡圖標和相應的動效。即便最簡單的三個小橫杠構成的圖標和交叉的關閉圖標之間的動效，也可以這么豐富多彩，這種發(fā)現(xiàn)的愉悅會讓人感受到一種別樣的舒適感。
是一款效果超酷的圖標變形動畫特效CSS3動畫庫。包括18種不同的變形動畫效果，你還可以通過Sass文件來自定義你自己的圖標變形動畫。
-是一款輕量級的使用來繪制SVG圖形輪廓線路徑動畫的插件。該插件使用內(nèi)置的動畫引擎來使SVG元素中path元素產(chǎn)生動畫，其底層實現(xiàn)使用的是-和-屬性。它適用于矢量元素，借此創(chuàng)建出獨特的視覺效果。而且屬于輕量級，壓縮后小于2kb同時支持過渡動畫效果！
則是 Ahlin 的個人項目，它提供了16種基于文本和字體的動畫效果，你只需要復制代碼粘貼到你的網(wǎng)站里面，就能夠重現(xiàn)出相應的效果。如果你需要做個性的頁面或個人作品集網(wǎng)頁時，我想這這16個動畫文字效果你會用得上。
Tilt.js
Tilt.js 是一個非常小的插件，用來創(chuàng)建微妙但是引人矚目的視差效果，而 Pixel Wave 則可以將像素變成博朗，帶來時尚非常的幾何元素氛圍。
3D Lines
3D Lines則是基于 Three.js 的解決方案。它可以創(chuàng)建不斷變化的顏色和線條，風格現(xiàn)代而視覺感十足。
來自專業(yè)人事的動效工具真的能夠讓你的網(wǎng)頁和產(chǎn)品擁有截然不同的視覺效果，尤其是像 Mary Lou 這樣的高手所創(chuàng)建的工具。你可以看看 和 這兩篇文章，其中都包含了非常突出的展示，清新而時尚。當然，這些代碼和工具的缺陷在于……過于先鋒，對于瀏覽器兼容性有著極高的要求。但是這不會是不可逾越的障礙，因為瀏覽器會越來越先進，性能越來越強。
后 記
透過動效網(wǎng)頁上的按鈕點不動，我們希望用戶也能夠感受到我們的真誠與善意，不求能與用戶天長地久，只求用戶能在我們這個書的城堡中有一場浪漫的旅程。趕快推薦給坐旁邊的程序員小哥哥吧，至少你這一小小舉動能讓他少掉兩根秀發(fā)。同時也希望你或多或少Get到了一些知識面，相信網(wǎng)頁動效的操作會為你帶來更豐富的沖浪體驗，下期見~
神器推薦