新的在线工具和网络应用程序让开发者可以快速创建网站，而无需逐行手动编写代码。当前，前端开发领域不断涌现出新的框架和代码库。然而，这也让很多开发者忘记了代码生成器及其在建站中的作用。以下资源是完全免费的Web应用程序，可用于为图案、渐变甚至浏览器前缀属性生成CSS3代码。如果您正在编写前端代码，那么这些资源可以为您节省大量时间并为未来的项目工作提供可重复的片段。1.CSS3Generator每个人最喜欢的用于代码生成的Web应用程序之一是CSS3Generator。它针对不同类别的代码生成器有不同的页面，包括RGBa、transform、flexbox等。此外，每个代码生成器都包含一个图标，说明哪个浏览器版本完全支持该属性。官网：http://css3generator.com/2.EnjoyCSS想要更动态的应用，那就试试EnjoyCSS网站吧。它意味着一个完整的代码生成器，用于动态项目中的自定义输入字段或CSS3按钮。它为过渡和过渡提供自定义代码，并为常见页面元素（如CSS3按钮）提供预建项目。官网：http://enjoycss.com/3。Patternify除非你已经学过Photoshop，否则如果从头开始，难免会成为你的一大难题。值得庆幸的是，Patternify是一个免费工具，可以生成平铺CSS模式所需的一切。背景是使用Base64代码添加到CSS时生成的。您可以使用原始像素数据绘制自己的模型，甚至可以从一堆预设图案中进行选择。毫无疑问，Photoshop是更好的选择，但如果您还没有学习过Photoshop或其他图形设计程序，Patternify也是不错的选择。官网：http://www.patternify.com/4。ColorZillaGradientsCSS3渐变是该语言中最复杂的特性之一。很容易使代码变得冗长得可笑。ColorZilla的渐变编辑器是一个免费的CSS3背景渐变生成器。该设置与Photoshop或其他颜色选择器界面非常相似。您可以为同一渐变中的大量颜色设置多个断点，以及从HEX或HSL或RGBa代码中选择输出选项。官网：http://www.colorzilla.com/gradient-editor/5。CSSmatic另一个免费的多用途网络应用程序是CSSmatic。我称它为“多用途”应用程序的原因是因为它可以生成4种不同的CSS属性：渐变、圆角边框、圆角和方框投影以及BG噪声。整个网站完全免费，预计未来会增加更多功能。官网：http://www.cssmatic.com/#p#6。CSSTypeSet当我们开始设计时很容易忘记排版，但它是任何网页最重要的方面之一。重置很好，但有时我们希望自动化该过程。CSSTypeSet通过实时预览文本并提供CSS代码复制到您自己的网站来实现这一目标。官网：http://csstypeset.com/7。Prefixr每个开发人员都遭受编写自定义前缀来处理所有Web浏览器的痛苦。值得庆幸的是，该标准已经取得了长足的进步，现在并不是所有的前缀都需要添加——但很多仍然需要添加。Prefixr是一种免费更新CSS代码以包含所有必需前缀属性的工具。官网：http://prefixr.com/8。PleeeasePlayPrefixr的另一个替代品是PleeeasePlay网络应用程序。这是另一个CSS前缀生成器，它也可以执行其他高级CSS3更新。最值得注意的是，您会发现它向后兼容更新的CSS3不透明度、过滤器和伪元素，以及其他简洁的效果。此外，界面超级简单易用，成为开发者再次检查代码的好帮手。官网：http://pleeease.io/play/9。CSS3ButtonGenerator传统的按钮和输入元素总是受到操作系统默认样式的限制。现在比以往任何时候都更容易自定义独特的按钮-最大的问题是将您的设计从Photoshop/Sketch转换为CSS3。一旦你学会了所有的CSS属性，这就会变得更容易，但你仍然需要编写很多行代码。CSSButtonGenerator是一款用于自定义按钮样式和标签文本的免费工具。只要更改设置，代码就会自动生成和更新。官方网站：http://css3buttongenerator.com/10.BestCSSButtonGenerator对于按钮代码，还有一种方法是BestCSSButtonGenerator。它也是完全免费的，界面简单。最重要的是，您可以从预设按钮中进行选择，并使用模板进行自己的设计。如果您是Chrome用户，您还可以从网站外部访问这个免费的浏览器扩展程序。官网：http://www.bestcssbuttongenerator.com/CSS越练越容易。但是，在某些时候，当您达到精通水平时，自动化确实有其可取之处。欢迎发表你的看法。翻译链接：http://www.codeceo.com/article/10-top-css3-code-generator.html英文原文：TopFreeCSS3CodeGenerators
