好用的67個(gè)前端工具、庫(kù)與資源
發(fā)表時(shí)間：2024-05-10 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這個(gè)列表包含許多種類的資源，所以這里我將它們分組整理。Javascript 庫(kù)Particles.js?—?一個(gè)用來在 web 中創(chuàng)建炫酷的浮動(dòng)粒子的庫(kù)Three.js?—?一個(gè)用來在 web 中創(chuàng)建 3d 物體和 3d 空間的庫(kù)Fullpage.js—?快速實(shí)現(xiàn)全屏滾動(dòng)特性Typed.js?—?...
這個(gè)列表包含許多種類的資源，所以這里我將它們分組整理。
Javascript 庫(kù)
Particles.js?—?一個(gè)用來在 web 中創(chuàng)建炫酷的浮動(dòng)粒子的庫(kù)
Three.js?—?一個(gè)用來在 web 中創(chuàng)建 3d 物體和 3d 空間的庫(kù)
Fullpage.js—?快速實(shí)現(xiàn)全屏滾動(dòng)特性
Typed.js?—?打字機(jī)效果
Waypoints.js?—?滾動(dòng)到某個(gè)元素位置時(shí)觸發(fā)一個(gè)功能
Highlight.js?—?web 語法高亮
Chart.js?—?使用 JavaScript 創(chuàng)建漂亮的圖表
Instantclick?—?能夠明顯加速網(wǎng)站加載時(shí)間，鼠標(biāo) hover 時(shí)預(yù)加載資源
Chartist?—?另一個(gè)圖表庫(kù)
Motio?—?一個(gè)基于動(dòng)畫和平移的雪碧圖庫(kù)
Animstion?—?CSS 實(shí)現(xiàn)動(dòng)畫過渡的 jQuery 插件
Barba.js?—?流式頁面過渡
TwentyTwenty?—?一個(gè)對(duì)比圖片的可視化 diff 工具
Vivus.js?—?在 SVG 上繪制動(dòng)畫
Wow.js?—?滾動(dòng)時(shí)展現(xiàn)動(dòng)畫
Scrolline.js?—?頁面滾動(dòng)時(shí)顯示滾動(dòng)進(jìn)度
Velocity.js?—?快速流暢的 JavaScript 動(dòng)畫
Animate on scroll?—?漂亮的頁面滾動(dòng)元素動(dòng)畫
Handlebars.js?—?Javascript 模板
jInvertScroll?—?視差滾動(dòng)
One page scroll?—?又一個(gè)頁面滾動(dòng)庫(kù)
Parallax.js?—?對(duì)智能設(shè)備方向變化做出響應(yīng)的視差引擎
Typeahead.js?—?搜索補(bǔ)全
Dragdealer.js?—?炫酷拖拽
Bounce.js?—?創(chuàng)建炫酷的 CSS3 動(dòng)畫
Pagepiling.js?—?全屏滾動(dòng)
Multiscroll.js?—?兩列垂直反向滾動(dòng)
Favico.js?—?動(dòng)態(tài) favicon
Midnight.js?—?固定頭部切換效果
Anime.js?—?動(dòng)畫庫(kù)
Keycode?—?獲取鍵盤按鍵的 JavaScript keycode
Sortable?—?拖拽插件
Flexdatalist?—?自動(dòng)補(bǔ)全
Slideout.js?—?移動(dòng)應(yīng)用側(cè)滑導(dǎo)航
Jquerymy?—?使用 jQuery 實(shí)現(xiàn)雙向數(shù)據(jù)綁定
Cleave.js?—?實(shí)時(shí)格式化輸入內(nèi)容
Page?—?客戶端單頁應(yīng)用路由
Selectize.js?—?用來添加 tag 的 Hybrid 選擇框
Nice select?—?創(chuàng)建漂亮的選擇框的 jQuery 庫(kù)
Tether?—?使用固定定位來創(chuàng)建相關(guān)元素
Shepherd.js?—?為應(yīng)用創(chuàng)建新手引導(dǎo)
Tooltip?—?tooltip 提示框
Select2?—?Jquery 選擇框插件
IziToast?—?通知彈窗實(shí)現(xiàn)
IziModal?—?模態(tài)框?qū)崿F(xiàn)
CSS 庫(kù) / 設(shè)計(jì)相關(guān)
Animate.css?—?動(dòng)畫庫(kù)
Flat UI Colors?—?扁平化設(shè)計(jì)配色
Material design lite—?基于 Google material design 的框架
Colorrrs?—?隨機(jī)顏色生成器
Section separators?—?CSS 實(shí)現(xiàn)區(qū)域分割
Topcoat?—?框架
Create ken burns effect?—?使用 CSS3
動(dòng)畫實(shí)現(xiàn) Ken burns 特效
DynCSS?—?給 CSS 添加 function，動(dòng)態(tài)化 CSS
Magic animations?—?CSS3 實(shí)現(xiàn)動(dòng)畫特效
CSSpin?—?css spinners 合集
Feather icons?—?Icon 集合
Ion icons?—?Icon 集合
Font awesome?—?Icon 集合
Font generator?—?組合多個(gè)字體創(chuàng)建混合字體
On/Off switch?—?使用 CSS 創(chuàng)建 on/off 開關(guān)、radio 按鈕
UI Kit?—?框架
Bootstrap?—?框架
Foundation?—?框架
有用的產(chǎn)品/鏈接
<head>cheatsheet?—?可以寫在<head>中的所有標(biāo)簽
Ghost?—?基于 Node.js 的博客平臺(tái)
What runs?—?一個(gè)用于網(wǎng)站技術(shù)分析的 Chrome 插件
Learn anything?—?一個(gè)強(qiáng)大的用于分析某個(gè)主題的思維導(dǎo)圖
以上就是好用的67個(gè)前端工具、庫(kù)和資源 的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
