又是周五了，提前祝大家周末愉快！今天就来分享一些好用的前端工具吧！1.SmallDevtoolsSmallDevTools是一个前端工具网站，包含了很多有用的功能，比如JSONdecoder,JSONFormatter,UTF8Encoder,Base64Encoder,Base64Decoder,CSSFormatter,CSSCompressor等。官网：https：//smalldev.tools/2。CarbonCarbon是一个在线工具，可以生成不同风格的漂亮代码图片。官网：https://carbon.now.sh/3。UI设计日报UI设计日报提供免费的优质UI资源。官网：https://www.uidesigndaily.com/4。ColorHuntColorHunt，或色彩猎人，是一个在线设计和配色网站。它最大的特点是利用饱和度来调整配色方案。排版会根据浏览量每天更新，直接使用即可。官网：https://colorhunt.co/5。SCHEMECOLORSCHEMECOLOR是一个在线配色工具网站，可以根据颜色、类型等找到合适的配色方案。官网：https://www.schemecolor.com/6。关键帧关键帧可用于创建动画、阴影和使用颜色来帮助我们编写更好的CSS。官网：https://keyframes.app/7。设计资源设计资源是设计资源的集合。官网：https://www.designresourc.es/8。OmatsuriOmatsuri是一个开源项目，包含12个有用的前端工具。官方网站：https://omatsuri.app/9。UISnippetsUISnippets是前端动画的集合，你可以直接在需要的动画上右击复制相应的CSS或SCSS代码。官网：https://ui-snippets.dev/10。图案CSSPatternCSS可以用漂亮的图案填充空白背景。官网：https://bansal.io/pattern-css11。CanIuseCanIuse可以查询HTML5、CSS、JS、SVG在各种流行浏览器中的特性和兼容性。官网：https://caniuse.com/12。CSSGradientCSSGradient是一个用于快速轻松地创建CSS渐变的网站。官网：https://cssgradient.io/13.CSSmaticCSSmatic是一个CSS工具，目前包含4个好用的工具，分别是：支持各种颜色和透明度的渐变工具。使用渐变工具，您可以创建平滑的渐变颜色变化效果和微妙的透明度；边框圆角工具可以帮你轻松实现想要的圆角效果；噪声纹理可以帮助您创建美妙的背景图案，并且您可以实时预览结果；方框阴影工具可以控制模糊半径变化、颜色变化、阴影大小，任何你想要的效果都可以实现。官网：https://www.cssmatic.com/14.AmIResponsiveAmIResponsive用于测试响应式网页。输入链接以生成预览，AmIResponsive可帮助我们测试页面在移动设备、平板电脑、笔记本电脑和桌面设备上的外观。官网：http://ami.responsivedesign.is/15。CSSGenerator这是一个实用的CSS生成器，可以实时查看调试效果。官网：https://html-css-js.com/css/generator/16。MyBrandNewLogoMyBrandNewLogo是一个CSS调色板生成器，用于创建一致的调色板方案。官网：https://mybrandnewlogo.com/color-palette-generator17。剪切路径生成器CSScli-path函数可以构建复杂的形状，这个工具可以让我们轻松地交互式构建这个多边形。官网：https://bennettfeely.com/clippy/18。CSSGridGeneratorCSSGridGenerator是一个网格布局生成器，通过它可以快速创建自定义的CSS网格布局。官网：https://cssgrid-generator.netlify.app/19。CSSLayoutGeneratorCSSLayoutGeneratorLayoutGenerator可以为布局组件创建CSS和HTML工具。官网：https://layout.bradwoods.io/20。Fluid-responsivefont-sizecalculatorFluid-responsivefont-sizecalculator是一款响应式字体计算器，可以轻松打造流畅的排版体验。它有更广泛的支持，可以用几行CSS来实现。官网：https://websemantics.uk/tools/responsive-font-calculator/21。regex101Regex101是一个学习和测试正则表达式的工具网站。官网：https://regex101.com/22。Regex-VisRegex-Vis是一个正则表达式可视化工具和编辑器。官网：https://regex-vis.com/23。LoupeLoupe是一个可视化工具，可以帮助我们理解JavaScript的调用栈/事件循环/回调队列是如何执行的。官网：http://latentflip.com/loupe/24。RunJSRunJS是一个桌面应用程序，可以帮助我们编写专门的Javascript和Typescript代码。它的一些优势是代码的快速测试、库代码的轻松导入和测试，以及修改界面、主题和字体以适应偏好的能力。官网：https://runjs.dev/25。WrapSVGOnlineWrapSVGOnline通过拖放从您的计算机上传图像，您可以轻松地为网页编辑SVG图像。官网：https://pavellaptev.github.io/warp-svg/26。SVGPathVisualizerSVGPathVisualizer可以通过输入SVG路径数据，帮助我们快速直观的查看SVG图像。此外，该工具还提供了详细的说明来学习如何创建基本的SVG形状，例如直线、曲线、三角形等。官网：https://svg-path-visualizer.netlify.app/27。BGJarBGJar是一个在线工具，可以轻松快速地为网站创建SVG背景。只需编辑必要的信息，它会自动导出图像或代码，供我们申请到网站。官网：https://bgjar.com/28。WavesnippetsWavesnippets可以将代码一步一步设置为动画、视频或GIF。官网：https://www.wavesnippets.com/29。生成SVG波浪生成SVG波浪可用于创建SVG波浪背景。官网：https://svgwave.in/30。CodeSandboxCodeSandbox是一款专为Web应用开发而打造的在线编辑器，支持多种主流框架。官网：https://codesandbox.io/31。OpenbaseOpenbase帮助开发者在数以百万计的开源软件包中进行选择和使用。官网：https://openbase.com/32。CodePenCodePen是一款在线前端代码编辑工具，可以用来制作测试页面，代码调试，所见即所得。官网：https://codepen.io/33。JSONLintJSOLLint是一个JSON调试工具，用于检查语法中是否缺少某些内容。JSONLint是处理大型JSON格式的好工具，而且很容易上手。官网：https://jsonlint.com/34。MinifyMinifier可以压缩JavaScript和CSS代码，通过minify可以提高网站加载速度。Minifier通过删除.js和.css文件中的空格并重新格式化它们来减小大小。官网：https://www.minifier.org/35。UnminifyUnminify与Minifier正好相反。使用Unminify使.js或.css文件可读。这两种工具都非常易于使用。官网：https://unminify.com/36。CRADIENT.ARTCRADIENT.ART是一款高级CSS渐变编辑器，可使用功能丰富的编辑器设计插图、图案、图标等，并提供分层、设计工具和免费云存储。官网：https://gra.dient.art/37。3DPop3DPop可以使用CSS生成很棒的3D文字效果。官网：https://textpop3d.web.app/38。CSSPhotoFiltersCSSPhotoFilters是一款CSS图片滤镜工具，提供了36种CSS滤镜供我们使用。官网：https://baseline.is/tools/css-photo-filters/
