網站動效（程序員必備）

動效顧名思義就是動畫效果。網頁中為什麼需要動效呢？簡單來說就是為瞭有趣。現如今，純粹靜態的網站越來越少，動態的網站是大勢所趨。而且動效現在已經無處不在瞭。有的動效可能是一個微妙的懸停效果，有的則是使用引人矚目的動態漸變背景抓住用戶的眼球，這些動畫就和字體、導航、圖標一樣， 是如今 UI 界面當中不可或缺的組成部分。如果你仍然抱著僥幸心理，認為動效隻是暫時的趨勢，過一陣子就會消失，那就大錯特錯瞭。如果把網頁和用戶的關系比做正在戀愛的情侶，很顯然網頁的 UI 是顏值，而動效在我看來則是情侶之間的小浪漫。可能和顏值比起來，浪漫似乎並不是那麼的重要，但是如果感情中沒有瞭浪漫，是不是會覺得少瞭點什麼呢？那麼動效就可以比喻他是一種網頁和用戶之間的浪漫。這種浪漫可以沒有，但有一定是為瞭讓用戶更爽。而用戶爽瞭就自然願意為你的產品買單，也是用戶體驗的粘合劑，增強瞭用戶界面的可訪問性，讓界面更易於被理解。如果我的這個假設成立，那麼動效就變成瞭一道愛情題。和所有愛情問題一樣，模仿一定是最簡單的捷徑，今天我們不推薦設計類的動效設計工具，推薦一些給前端小哥哥的福利，本期篩選瞭一推炫酷的CSS、JS炫酷動效在線下載網站，走起~BTTN.CSShttps://bttn.surge.sh/CSS 能實現很不多不同的樣式，隻有你想不到，沒有做不到哦，今天為大傢分享的 bttn.css 是一個專註分享網頁按鈕的樣式庫，設計師和前端人員可以參考這個設計，也能直接拿來使用。按鈕尺寸按鈕顏色使用方法也相當簡單，引入 CSS樣式後，直接在填寫對就的class名稱即可Hover Buttonshttps://varin6.github.io/Hover-Buttons/一個可以生成代碼的網站，選好你想要的樣式，下方就會生成相對應的前端代碼，一鍵復制是不是很省事？Granim.jshttps://sarcadass.github.io/granim.js/這是一款基於canvas的背景顏色漸變動畫插件。該插件通過配置幾組不同的顏色方案，使指定元素在這些顏色中執行平滑的漸變色過渡效果。Micronhttps://webkul.github.io/micron/micron.js是一款可生成炫酷CSS3動畫的js動畫庫插件。通過micron.js插件，你可以為頁面的任意DOM元素添加12種炫酷CSS3動畫效果。並能通過js代碼或html5 data屬性來串聯各種CSS3動畫效果。 Blotter.jshttps://blotter.js.org/像 Blotter.js 這樣神奇的動效還是會時不時地給我帶來驚喜，留下深刻的印象。但是總的來說，良好的用戶體驗始終是非常重要的。網站顯示內容的時候，它應該持續地吸引用戶，讓用戶保持興趣。PROGESS BARhttps://kimmobrunfeldt.github.io/progressbar.js/ProgressBar.js 是一個借助動態 SVG 路徑的漂亮的，響應式的進度條效果。使用 ProgressBar.js 可以很容易地創建任意形狀的進度條。這個 JavaScript 庫提供線條，圓形和方形等幾個內置的形狀，但你可使用 Illustrator 或任何其它的矢量圖形編輯器創建自己的進度條效果。Second-Hamburger-Helperhttps://codepen.io/KPCodes/pen/YpwrdxSecond-Hamburger-Helper，這個其中包括十幾個非常可愛漢堡圖標和相應的動效。即便最簡單的三個小橫杠構成的圖標和交叉的關閉圖標之間的動效，也可以這麼豐富多彩，這種發現的愉悅會讓人感受到一種別樣的舒適感。Hamburgershttps://jonsuh.com/hamburgers/Hamburgers是一款效果超酷的圖標變形動畫特效CSS3動畫庫。包括18種不同的變形動畫效果，你還可以通過Sass文件來自定義你自己的圖標變形動畫。JQuery DrawSVGhttp://leocs.me/jquery-drawsvg/Jquery-drawsvg是一款輕量級的使用jQuery來繪制SVG圖形輪廓線路徑動畫的插件。該插件使用jQuery內置的動畫引擎來使SVG元素中path元素產生動畫，其底層實現使用的是stroke-dasharray和stroke-dashoffset屬性。它適用於矢量元素，借此創建出獨特的視覺效果。而且屬於輕量級，壓縮後小於2kb同時支持Easing過渡動畫效果！Moving Lettershttps://tobiasahlin.com/moving-letters/Moving Letters 則是 Tobias Ahlin 的個人項目，它提供瞭16種基於文本和字體的動畫效果，你隻需要復制代碼粘貼到你的網站裡面，就能夠重現出相應的效果。如果你需要做個性的頁面或個人作品集網頁時，我想這這16個動畫文字效果你會用得上。Tilt.js http://gijsroge.github.io/tilt.js/Tilt.js 是一個非常小的插件，用來創建微妙但是引人矚目的視差效果，而 Pixel Wave 則可以將像素變成博朗，帶來時尚非常的幾何元素氛圍。3D Lineshttp://joanclaret.github.io/html5-canvas-animation/3D Lines則是基於 Three.js 的解決方案。它可以創建不斷變化的顏色和線條，風格現代而視覺感十足。Decorative Letter Animationshttps://tympanus.net/codrops/2018/01/10/decorative-letter-animations/來自專業人事的動效工具真的能夠讓你的網頁和產品擁有截然不同的視覺效果，尤其是像 Mary Lou 這樣的高手所創建的工具。你可以看看 Decorative Letter Animations 和 Glitch Effect 這兩篇文章，其中都包含瞭非常突出的展示，清新而時尚。當然，這些代碼和工具的缺陷在於……過於先鋒，對於瀏覽器兼容性有著極高的要求。但是這不會是不可逾越的障礙，因為瀏覽器會越來越先進，性能越來越強。後 記透過動效，我們希望用戶也能夠感受到我們的真誠與善意，不求能與用戶天長地久，隻求用戶能在我們這個書的城堡中有一場浪漫的旅程。趕快推薦給坐旁邊的程序員小哥哥吧，至少你這一小小舉動能讓他少掉兩根秀發。同時也希望你或多或少Get到瞭一些知識面，相信網頁動效的操作會為你帶來更豐富的沖浪體驗，下期見~