<p style="text-align: center;"><img src="https://simg.open-open.com/show/3fb4b3c98d40a097d5cf5764db37ac55.png"></p>    <p>Tutorialzine 是一个教程资源网站，每月都会发布一些优秀资源，以让读者了解最新最酷的网络开发趋势，本月同样精心挑选了 15 个 JavaScript 和 CSS 供大家参考学习。</p>    <h3><a href="/misc/goto?guid=4959741805423666113" rel="nofollow,noindex">Propeller</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/661e23ea1dbe412b932659b39724c902.png"></p>    <p>Propeller 是一个基于 <a href="/misc/goto?guid=4959741805515920461" rel="nofollow,noindex">Bootstrap</a> 和 Google’s <a href="/misc/goto?guid=4959661406530284420" rel="nofollow,noindex">Material Design</a> 语言的 CSS 组件框架。它包含 25 个组件，响应敏捷，具有典型 Material Design 动画的特点。该项目可以作为 Bootstrap 主题下载，也可作为完整的框架或独立的组件下载。</p>    <h3><a href="/misc/goto?guid=4959741805656324306" rel="nofollow,noindex">BaguetteBox</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/166c9246ffba5534b6d3be23c433b63d.jpg"></p>    <p>baguetteBox.js 是一个简单简单、易用的 JavaScript lightbox库，它具有一下特点：</p>    <ul>     <li> <p>纯 JavaScript 实现，无需依赖其他库</p> </li>     <li> <p>支持触摸屏设备手势操作</p> </li>     <li> <p>支持显示标题（说明）</p> </li>     <li> <p>支持响应式图像</p> </li>     <li> <p>支持CSS3过渡</p> </li>     <li> <p>使用 SVG 按钮，没有多余的文件下载</p> </li>     <li> <p>启用 gzip 压缩后仅 2KB</p> </li>    </ul>    <h3><a href="/misc/goto?guid=4959741344355628806" rel="nofollow,noindex">Whitestorm</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/74ddb7c58426f8e49bb63956de5818ea.png"></p>    <p>Whitestorm 使用 <a href="/misc/goto?guid=4959728701520121530" rel="nofollow,noindex">Three.js</a> 引擎开发 3D 网页应用和游戏，它为普通的 Three.js 任务提供封装，使搭建环境，创建对象，添加物件等操作更简单。官方提供了很好的 <a href="/misc/goto?guid=4959741805800366091" rel="nofollow,noindex">项目教程</a> ，以及 <a href="/misc/goto?guid=4959741805880430365" rel="nofollow,noindex">与 React 集成</a> 的工具。</p>    <h3><a href="/misc/goto?guid=4959741344453953907" rel="nofollow,noindex">Animatelo</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/08b15077000af400aad431f656749d00.png"></p>    <p>Animatelo 是极度流行的 Animate.css 库的端口，它用  Web Animations API 克隆代替 CSS 转换。所有原始的 Animate.css 效果都被重建，但现在的 API 是基于 JavaScript 类而不是 CSS 类。该库轻量且不依赖 jQuery，但在旧版浏览器要求 polyfill。</p>    <h3><a href="/misc/goto?guid=4959741805999092264" rel="nofollow,noindex">FuseBox</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a9b578540018990cf96fabf3277786a1.png"></p>    <p>FuseBox 是一个用于 JavaScript 和 CSS 的捆绑加载器，带有 TypeScript，Sass 等可选的附加组件。它以简洁与性能为主，为 webpack 提供替代方案。相关教程： Angular 2 + TypeScript , React + Babel , Vue.js , Electron 等。</p>    <h3><a href="/misc/goto?guid=4959741344571192418" rel="nofollow,noindex">Yargs</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8d5482bd808d842b0eb1494309e71e29.png"></p>    <p>Yargs 框架通过使用 Node.js 构建功能全面的命令行应用，它能轻松配置命令，解析多个参数，并设置快捷方式等，还能自动生成帮助菜单。</p>    <h3><a href="/misc/goto?guid=4959741344647754302" rel="nofollow,noindex">WebGradients</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f36a78d84daf80d25cd2ec05150b98ce.png"></p>    <p>WebGradients 含有多种漂亮的渐变色，可在任何 HTML 页面轻松应用。你可在项目网站快速预览可用的渐变色，还能一键复制 CSS 到你的项目中去。</p>    <h3><a href="/misc/goto?guid=4958538440202566341" rel="nofollow,noindex">Sticky-Kit</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e0e27d865ce7646e7d61786246e8857c.png"></p>    <p>Sticky-kit 是一个 jQuery 插件，它允许你在页面附加元素，设置跟随滚动的侧边栏效果。</p>    <h3><a href="/misc/goto?guid=4959741344756874552" rel="nofollow,noindex">ScrollDir</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0ee0f5a8379312fca0bedb422fdb5e8c.png"></p>    <p>ScrollDir 是一个超轻量无依赖的 JavaScript 库，用以检查滚动条的移动，并根据你的选择元素切换 上/下 数据属性。该项目能给你带来平滑的用户体验。</p>    <h3><a href="/misc/goto?guid=4958962522712183782" rel="nofollow,noindex">Svgo</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/cb1a0c1e8e26ff046d333c7bf4085ac6.png"></p>    <p>用以优化 SVG 文件的 Node.js 工具，它将它们从非必要的信息中剥离出来，如，编辑器元数据，注释，隐藏元素等。SVGO 具有基于插件的架构，你可自由选择需要删除和保留的内容。</p>    <h3><a href="/misc/goto?guid=4959741806232488290" rel="nofollow,noindex">Store.js</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/fad99914da65d6e7859229ae0310de38.png"></p>    <p>Store.js 是一个跨浏览器的用于高级本地存储的解决方案，它实现了浏览器的本地存储的 JavaScript 封装 API，不是通过 Cookie 和 Flash 技术实现，而是使用 localStorage、globalStorage 和 userData 行为。</p>    <h3><a href="/misc/goto?guid=4959741806321484479" rel="nofollow,noindex">Snarkdown</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1630fec8eb9a3c38db924c3ff4391d27.png"></p>    <p>Snarkdown 是一个用 JavaScript 编写的极简的 Markdown 解析器。它不是功能最全的，但可能是最容易实现的一款解析器。Snarkdown 只有 1Kb 大小，且只有一种方法，适合速成项目。</p>    <h3><a href="/misc/goto?guid=4959739255749051801" rel="nofollow,noindex">Unfetch</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/9c5d4f214855d5bccc8e7d9179534d6c.png"></p>    <p>Fetch API 能让开发者更好地处理异步请求，它能在大多数浏览器上受支持，但 fetch() 方法在 IE 浏览器中仍不可用。</p>    <h3><a href="/misc/goto?guid=4959741806432905832" rel="nofollow,noindex">Scrollanim</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bb75b5c7b1b8e4518346862189a4b422.png"></p>    <p>Scrollanim 是使用 CSS3 + JavaScript 实现的用于创建滚动动画的库，应用到元素上后，当此元素出现在浏览器可视区域时便会执行对应的动画。Scrollanim 是 Kissui 的一部分，所以使用 Scrollanim 时需要用到 kissui.css。</p>    <h3><a href="/misc/goto?guid=4959741806519726909" rel="nofollow,noindex">Neurojs</a></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8fda8825f61ac9f12eba685cd70b9e6f.png"></p>    <p>用于在浏览器中进行深度学习 JavaScript 框架，可以通过强化学习进行全栈神经网络。</p>    <p> </p>    <p> </p>    <p>来自：https://my.oschina.net/editorial-story/blog/859825</p>    <p> </p>