1. 首页
  2. IT资讯

19年你应该关注这50款前端热门工具(中)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fa5ed3244020f471c993e58532e8c66e9″ img_width=”900″ img_height=”383″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E上篇文章u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6708928219912864264u002F?group_id=6708928219912864264″ target=”_blank”u003E19年你应该关注这50款前端热门工具(上)u003Cu002Fau003E,小编介绍了构建、框架和库的相关工具,本篇文章小编再给大家推荐HTML、CSS、Javascript等相关的十几款工具,希望大家喜欢。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EHTML和CSS工具u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E15、 keyframes.appu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fkeyframes.appu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fbc58cb8bc0b64e4ea2c72c9a189f2a67″ img_width=”600″ img_height=”406″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款基于时间关键帧,在线制作网页动画的网站,你无需在编辑器和浏览器直接互相切换,及所见即所得。keyframes.app提供在线制作和谷歌浏览器扩展插件两种形式。制作完成后,很方便的将生产的CSS代码复制到你的项目中。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E16、 Emotionu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Femotion.shu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F15a6b34692cd41a9aef773f6f6056d79″ img_width=”1060″ img_height=”756″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EEmotion是一款用JavaScript编写css的库,支持字符串和对象两种方式声明CSS变量,如果你在使用React,试用这个库将让你以更加优雅的方式用JavaScript编写CSS。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E17、modern-normalizeu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fgithub.comu002Fsindresorhusu002Fmodern-normalizeu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F270af42d2f3d46a891c466f801b854c1″ img_width=”475″ img_height=”364″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Enormalize.css可以让浏览器以接近标准的方式一致地渲染所有元素,而且不同于cssrest,只针对需要正常化的元素。modern-normalize只针对现代浏览器,而且足够现代,甚至IE和Edge都已经放弃。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E18、layerJSu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Flayerjs.orgu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F41a7b8afaea64ad7b8885e89c032f260″ img_width=”1240″ img_height=”578″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款你只需要编写HTML就能很轻松实现菜单、画框、弹出层、滚动视察、缩放、触摸手势等众多效果的框架,这个框架代码压缩版只有30KB,很方便与各种前端框架集成(Angular,VueJS,React),支持响应式和触摸,并且不依赖任何库就能实现。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E19、css-blocksu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fcss-blocks.comu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fae8f734854a44b21a2b854aa1bb55201″ img_width=”1620″ img_height=”918″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款受 CSS Modules, BEM 和 Atomic CSS 框架启发,为你的web应用组件提供完美的CSS模块方案。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E20、usebasinu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fusebasin.comu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc56fc4e69a4749f9becf714f3e037f76″ img_width=”1620″ img_height=”544″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款你只需要设计表单,无需编写后端代码,就能很方便的将表单应用集成到你的项目里。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E21、mustardu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fmustard-ui.comu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F6de1243db7284656ba22eb27edfa0ddc” img_width=”1620″ img_height=”535″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款适合初学者的CSS框架,但是看起来还蛮不错,模块化,开源,压缩版只有6KB,支持FLEX,Grid布局和自带一些漂亮UI,比如进度条,表单、按钮等,虽然小,但功能齐全。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003Ejavascript工具u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E22、ScrollHintu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fappleple.github.iou002Fscroll-hintu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F4c391040be5842d0aabd1dcc02f77b87″ img_width=”354″ img_height=”498″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一个JS库,用于指示元素可以水平滚动,并带有指针图标,如果你在做一个新手引导,这个工具将会是一个不错的选择。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E23、ToastUI editoru003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fgithub.comu002Fnhnentu002Ftui.editoru003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F5e15cedf703d4c5d9c5ae89cf3038da2″ img_width=”800″ img_height=”450″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E强大的Markdown编辑器tui.editor,方便集成到你的项目里,这款强大的富媒体编辑器有以下特点:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E支持 CommonMark 与 GFM(GitHub Flavored Markdown)两种标准u003Cu002Fliu003Eu003Cliu003E支持丰富的扩展插件,如颜色选择器、图表、UML、表格合并u003Cu002Fliu003Eu003Cliu003E提供了所见即所得与 Markdown 这两种模式,在编辑过程中可以随时切换,非常方便。在所见即所得模式下,可以直接从浏览器、 Excel、PPT等复制文本,并且保留原来的格式u003Cu002Fliu003Eu003Cu002Fulu003Eu003Ch1u003Eu003Cstrongu003E24、FilePondu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fgithub.comu002Fpqinau002Ffilepondu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F4174c92dee384c5d8e3fbb39c9054763″ img_width=”370″ img_height=”400″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EFilepond 是一个用于文件上传的 JavaScript 库,可以上传任何内容,优化图像以获得更快的上传速度,并提供一个出色的,可访问的,流畅的用户体验。u003Cu002Fpu003Eu003Cpu003EFilepond 提供了多种上传方式:拖放,复制和粘贴文件,浏览文件系统或仅使用库的API。 gzip 压缩后仅有 21KB ,并且内置了图像优化和图像自动调整功能。u003Cu002Fpu003Eu003Cpu003EFilepond 适用于 React , Vue , Angular 和 jQuery 。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E25、Dinero.jsu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Ehttps:u002Fu002Fsarahdayan.github.iou002Fdinero.jsu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fdbb0a24743e54f5bb8bb8d3da9701179″ img_width=”1440″ img_height=”950″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一个用来创建、计算和格式化货币价值的不可变的框架。u003Cu002Fpu003Eu003Cpu003E无论在银行应用程序、电子商务网站还是证券交易所平台,我们每天都在与金钱互动。我们也越来越依赖技术来处理问题。u003Cu002Fpu003Eu003Cpu003E然而,关于如何以编程处理货币价值尚无共识。虽然金钱是现代社会中普遍存在的概念,但相较于日期和时间之类的东西,它并不是任何主流语言中的一流数据类型。结果,每一种软件都有自己的处理方式,且伴随着陷阱。u003Cu002Fpu003Eu003Cpu003EDinero.js遵循Fowler的模式更多一点儿。它允许你在JavaScript中创建、计算和格式化货币值。你可以进行数学运算、解析和格式化对象,使你的开发过程更加轻松。u003Cu002Fpu003Eu003Cpu003E该库设计为不可变和可链接的模式。它支持全局设置,具有扩展格式选项,并提供本机国际化支持。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E26、Swupu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fgithub.comu002Fgmrchku002Fswupu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F72fa0f4a017044fa8c66a12c49f02584″ img_width=”992″ img_height=”614″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款适合初学者的框架,方便灵活易用,让你能快速制作专业级的页面转场动画效果。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E27、Selection.jsu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fsimonwep.github.iou002Fselectionu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Fbeee31ae73894c6d84b28df639624900″ img_width=”1758″ img_height=”1122″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E简单易用的可视化,支持鼠标拖拽、使用Cmdu002FCtrl+click 选择页面元素的库(支持分组选择),大大节省了你的开发时间。只有3KB大小,不依赖jQuery。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E28、Glider.jsu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fnickpiscitelli.github.iou002FGlider.jsu002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F93faf1ff366545728e0d1d049a51c38d” img_width=”1620″ img_height=”1158″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一个超快速(25毫秒加载),轻量级(小于3KB),无依赖性(不需要jQuery)的制作幻灯效果的前端库,支持响应式,易于扩展,方便自定义事件等…,更多特性等待你的发现!u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E29、ScrollOutu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fscroll-out.github.iou002Fu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F9415d2e9788044e683bf8f53128bdf90″ img_width=”1444″ img_height=”972″ alt=”19年你应该关注这50款前端热门工具(中)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E一款帮你制作专业级Scroll滚动效果(滚动视差)的框架,框架大小不到1KB,使用回调的方式将相关动画元素的属性进行实时分配,方便你做出个性化的动态效果。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E今天的内容就分享到这里,在下篇文章里我将会给大家分享报表、React、测试和数据等相关的21款工具,敬请期待!u003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信关注”前端达人”公众号!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:19年你应该关注这50款前端热门工具(中)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10804.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code