译者：无名氏：逆锋穿鞘

CSS标识符计算机程序

你与否曾试著读懂怎样新闻稿蓝紫色，文档阴霾，Flexbox或Grid的CSS特性，nobres两例？不难。假如你屡次采用这类CSS机能或其特性，不然极难读懂大部份那些机能。但，即便是通晓CSS的人有时候也须要对这类特性展开备考，特别是假如她们有一两年没采用它了。

假如你须要许多新一代和最了不起的CSS的加速协助，这儿有CSS计算机程序来挽救。输出值，自动更新结论，截取聚合的标识符并运转。

CSS3 Generator

https://css3generator.com/

CSS3 Generator是这款完全免费的新浪网应用领域，它能让你加速撰写许多当代CSS机能的标识符，如Flexbox、蓝紫色、过渡阶段和转换等。

输出所需的CSS值，实时自动更新结论，复制并粘贴聚合的标识符。此外，此应用领域程序还会显示支持CSS标识符的浏览器或其版本的列表。

终极CSS Generator

https://webcode.tools/css-generator

CSS Generator是一个完全免费的新浪网应用领域程序，可让您聚合CSS动画，背景，蓝紫色，边框，滤镜等的标识符。

界面友好，你感兴趣的CSS机能的浏览器支持信息清晰易发现，聚合的标识符干净准确。无极4平台注册

CSS Grid布局计算机程序

https://css-grid-layout-generator.pw/

CSS Grid非常棒，用标识符创建网格能让你完全控制最终的结论。然而，在你编码的时候，有一个可视化的网格表示是很有协助的。虽然许多主要的浏览器已经实现了很好的辅助工具来让你可视化你的网格，但许多开发人员能做许多额外的协助。这是CSS Grid计算机程序可能派上用场的地方。

Dmitrii Bykov撰写的CSS Grid Layout Generator是完全免费的，能新浪网访问，并且非常灵活。我试了一下，发现它在网格容器级别和网格项目级别上为我提供了很多控制，同时为我提供了不错的自动更新机能和简洁的标识符。

假如你须要协助，请单击怎样采用（How to Use）按钮，然后观看应用领域译者提供的演示视频。

静态站点计算机程序

静态网站计算机程序代表

…在采用手动编码的静态网站和完整的CMS之间展开折衷， 同时保留两者的好处。本质上，会聚合一个 静态的纯HTML网站，采用类似CMS的概念（例如模板）。能从数据库中提取内容，但更典型地， 采用Markdown文件。

这是StaticGen网站上列出的前两个静态网站计算机程序。无极4平台注册

Next.js

https://nextjs.org/

Next.js是一个完全免费的开源框架，用于静态导出的React应用领域。其特点包括：

• 预渲染（Next支持服务器端渲染）
• 零配置
• 可扩展性
• CSS-in-JS
• 很棒的文档
• 和更多。

Gatsby

https://www.gatsbyjs.org/

Gatsby是基于React的完全免费开源框架，可协助 开发人员建立加速的网站和应用领域程序。

Gatsby 提供了大量机能，例如：

• React，webpack，当代JavaScript和CSS的强大机能
• 丰富的数据插件生态系统
• 渐进式Web应用领域程序聚合
• DT简单的部署
• 为不同的用例定制的预先打包的Gatsby站点
• 和更多。

SVG 优化器

网络上的性能至关重要：访问者在等待内容加载时会不耐烦，搜索引擎往往会惩罚速度缓慢的网站。

优化图形是构建加速网站和应用领域程序的必要步骤，SVG图形也不例外。为确保SVG标识符干净整洁，采用SVG优化器已成为前端开发人员工作流程中必不可少的步骤。

以下是两个出色的SVG优化器，它被专业开发人员广泛采用。

SVGOMG

https://jakearchibald.github.io/svgomg/

SVGOMG是一个完全免费的新浪网应用领域程序，可让你将许多优化选项应用领域于SVG标识符并自动更新最终结论。易于采用，也能离线采用。微信搜索公众号 逆锋穿鞘，关注后回复 编程资源，领取各种经典学习资料。

SVG Optimizers

https://petercollingridge.appspot.com/svg-optimiser无极4平台注册

这是另一个很棒的完全免费新浪网SVG优化辅助工具，可用于修剪SVG标识符，它直观易用。

动画库

动画在网络上随处可见，无论是微妙的微效果，还是大块内容在屏幕上逐渐展开的故事性运动，都是动画的存在。

虽然当代的CSS和JavaScript包含了你创建许多酷炫的网页动画所需的机能，但下面列出的库肯定能让你更快地完成工作，并获得许多惊人的效果。

Animate.css

https://animate.style/

Animate.css是一个可在你的Web项目中采用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。

顾名思义，那个库是纯CSS的。在预包装的效果中，你会发现：像弹跳和闪烁效果、后方入口和出口、淡入和淡出等引人注意的效果，以或其他大量的效果。

机能包括：

• 采用npm，Yarn或CDN加速安装
• 采用方便简单
• 采用CSS自定义特性（CSS变量）自定义动画持续时间，延迟和交互的选项
• 用于延迟、速度变化和重复的实用类。

GreenSock (GSAP)

https://greensock.com/

GSAP（GreenSock动画平台）提供针对当代网络的超高性能，专业级动画。

其高度直观的JavaScript驱动的语法使你能立即构建出色的动画。从DOM元素和JavaScript对象到SVG，Canvas和WebGL身临其境的体验，能采用GSAP展开动画制作的对象没任何限制。此外，GSAP是跨浏览器的，并且向后兼容，并提供了出色的文档和支持社区。无极4平台注册

Anime.js

https://animejs.com/

Anime.js 是一个轻量级的JavaScript动画库，具有简单而强大的API。它与CSS特性，SVG，DOM特性和JavaScript对象一起采用。

完全开源，凭借其直观的语法和出色的文档，你能立即采用Anime.js并开始运转。

跨浏览器测试

开发人员无法控制要从哪种设备访问其网站或应用领域程序。在2019年，超过一半的网络流量来自移动设备。从整体上看，屏幕尺寸从台式机、平板电脑到智能手机和可穿戴技术都有所不同。

作为前端开发人员，确保网页在任何屏幕尺寸下都能采用是我们工作的核心组成部分。虽然没什么比得上直接在不同的浏览器和平台上测试网站和应用领域程序，但以这种方式覆盖大部份基础不是我们大多数人的选择。下面列出的服务和应用领域程序能提供协助。

Caniuse

https://caniuse.com/

我不知道你是怎么想的，但当我须要了解浏览器对任何HTML、CSS、SVG和JavaScript机能支持的新一代信息时--无论那些机能是多么新奇或晦涩难懂——caniuse是我的首选网站。无极4平台注册

你将获得全球和特定国家/地区级别的新一代统计结论，以及有关特定问题，资源等的信息。

Am I Responsive?

http://ami.responsivedesign.is/

这是一个完全免费的新浪网应用领域程序，可让您加速检查网站在不同屏幕尺寸下的外观。

以下是机能列表：

• 你能通过在文档框中输出要测试的站点的URL，或从任何地方采用浏览器上的Am I RWD书签来从该应用领域程序的网站中采用该应用领域程序。
• http://localhost/ works。
• 能在显示你网站的每个设备上单击并滚动以展开测试。

Responsive Web Design Checker

https://responsivedesignchecker.com/

Responsive Web Design Checker，即响应式网页设计检查器，是另一个完全免费的新浪网应用领域，能测试你的网站不仅在不同的屏幕尺寸上，而且在各种设备上的外观。其中包括各种台式机和笔记本电脑，Apple iPad Retina和Amazon Kindle Fire等平板电脑，以及Apple iPhone 6/7 Plus，三星Galaxy等智能手机。

BrowserStack

https://www.browserstack.com/

BrowserStack是一项受欢迎的付费服务，可让你在2000多种真实设备和浏览器上测试你的网站或应用领域程序。它开箱即用，完全安全。无极4平台注册

标识符协作和游乐场

以下是许多很棒的辅助工具，可让您加速共享标识符，原型和测试项目构想。

GitHub

那个无需多言

CodePen

https://codepen.io/

CodePen已经存在了很多年，并且受到前端开发人员社区的喜爱和广泛采用，它非常适合试著概念，原型设计，学习编码和标识符共享。由其团队定义如下：

CodePen是一个社交化的开发环境。从本质上讲，它允许你在浏览器中撰写标识符，并在构建时查看其结论。对于任何技能的开发人员来说，这是一个有用的和自由的新浪网标识符编辑器，特别是对于学习标识符的人来说，这是一个赋能。我们主要专注于前端语言，例如HTML，CSS，JavaScript和可转化为那些内容的预处理语法。

JSFiddle

https://jsfiddle.net/

JSFiddle 是一个新浪网IDE服务和新浪网社区，用于测试和展示用户创建和协作的HTML、CSS和JavaScript标识符片段，即 "fiddles"。它允许模拟AJAX调用。2019年，JSFiddle根据编程语言（PYPL）人气指数的搜索次数，在全球和美国排名第二，直接排在Cloud9 IDE之后，成为最受欢迎的新浪网IDE。无极4平台注册

SoloLearn

https://www.sololearn.com/

SoloLearn是一个很棒的新浪网游乐场，可让你测试HTML，CSS和JavaScript标识符。它还完全免费提供基本的编码课程，以及供开发人员和学习者采用的论坛。

jsrun.net

https://jsrun.net/

这是一个国内版的CodePen，强力推荐！Codepen、JSFiddle虽好，但由于服务器在国外，四度非常慢。而jsrun.net速度非常快。