67 个JavaScript和CSS实用工具、库与资源
在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工具列表合集。
或许,一些朋友已经对文中的一些工具有所了解,但如果你发现了一些对你有帮助的新工具,那么,我将倍感欣慰。
由于这个列表中包含了不同类别的资源,为了便于大家查看,我已将其进行了重新的分类,来 Enjoy 吧!
JavaScript 库
Particles.js - 一个用于在网页上创建漂亮的浮动粒子的 JS 库;
Three.js - 用于在网页上创建 3D 物体与空间的 JS 库;
Fullpage.js - 易于实现全屏滚动功能的库;
Typed.js - 实现打字机效果;
Waypoints.js - 滚动到元素触发事件的库;
Highlight.js - 页面上语法高亮显示;
Chart.js - 纯 JS 制作漂亮的图表;
Instantclick - 鼠标悬停预先加载页面资源,大大加速你的网站响应速度;
Chartist - 开源响应式图表库;
Motio - 基于 sprite 的动画和平移库;
Animstion - 页面切换动画的 jQuery 插件;
Barba.js - 创建页面间流畅平滑的过渡效果;
TwentyTwenty - jQuery 视差插件;
Vivus.js - 可以执行 SVG 路径动画的轻量级 JS 库;
Wow.js - 页面滚动时展现动画效果;
Scrolline.js - 页面滚动时显示滚动进度的 jQuery 插件;
Velocity.js - 用于加速 JavaScript 动画;
Animate on scroll - 页面滚动时增添元素动画的小型库;
Handlebars.js - JavaScript 模板引擎;
jInvertScroll - 轻量级的 jQuery 水平视差插件;
One page scroll - 实现苹果风格单页滚动效果的 jQuery 插件;
Parallax.js - 轻量级的视差引擎,能够对智能设备的方向作出反应;
Typeahead.js - 搜索框自动补全的 JS 库;
Dragdealer.js - 基于拖动的 JavaScript 组件;
Bounce.js - 快速创建漂亮的 CSS3 动画效果;
Pagepiling.js - 创建全屏滚动效果;
Multiscroll.js - 创建两列垂直反向滚动效果的 jQuery 插件;
Favico.js - 动态图标插件;
Midnight.js - 固定头部切换效果;
Anime.js - JavaScript 动画引擎;
Keycode - 获取键盘按键的 JS 键码值;
Sortable - 用于拖拽排序的 JavaScript 库;
Flexdatalist - 支持
<datalist>
的 jQuery 自动完成插件;Slideout.js - 实现滑出式 Web App 导航菜单;
Jquerymy - 实时、复杂的双向数据绑定 jQuery 插件;
Cleave.js - 自动格式化表单输入框的文本内容;
Page - 构建单页应用的小型客户端路由库;
Selectize.js - 基于 jQuery 的
<select>
UI 控件,用于创建tag
标签输入框和 select 下拉框;Nice select - 创建漂亮下拉框的 jQuery 插件;
Tether - 使用绝对定位创建两个互相相关元素的 JS 库;
Shepherd.js - 创建新手引导的 JS 库;
Tooltip - 工具提示插件;
Select2 - 基于 jQuery 的替代选择框;
IziToast - 轻量的跨浏览器响应式消息通知插件;
IziModal - 炫酷的 jQuery 模态窗口插件。
CSS 库与设计资源
Animate.css - 强大的 CSS3 动画库;
Flat UI Colors - 漂亮的扁平化配色;
Material Design Lite - 基于谷歌 Material Design 的前端框架;
Colorrrs - 随机颜色生成器;
Section separators - CSS 区域分割;
Topcoat - 专注为简洁、快速的 Web 应用提供 CSS 开发的工具;
Create Ken Burns Effect - 利用 CSS3 实现的 Ken burns 特效;
DynCSS - 用于分析 CSS
-dyn-
属性规则,并使其具备动态属性;Magic animations - 具备特殊动效的 CSS3 动画;
CSSpin - 丰富的 CSS 加载动画;
Feather icons - 简单、漂亮的开源图标库;
Ion icons - 专为 Ionic 框架设计的图标字体;
Font Awesome - 可缩放的矢量图标字库;
Font Generator - 在线字体生成器;
On/Off FlipSwitch - 在线创建纯 CSS3 动画开关效果;
UIkit - 轻量级的模块化前端框架;
Bootstrap - 著名的前端框架;
Foundation - 著名的前端框架。
有用的产品/链接
<head> Cheatsheet - 可以写入到
<head>
标签的内容清单;(译者注:中文翻译版地址)Ghost - 基于 Node.js 的简易博客平台;
What runs - 用于网站技术分析的 Chrome 插件;
Learn anything - 用于分解项目的强大思维导图。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· spring官宣接入deepseek,真的太香了~