前端开发必备 40款优秀CSS代码编写工具推荐

　　摘要：CSS工具可以简化工作流，可以提高CSS编写速度，是开发者和设计者所不可缺少的。本文列举了40种CSS工具，功能涉及CSS菜单、动画、3D图形、响应式页面、图层、按钮等界面元素的设计与制作，你定可从中找到适合的工具。

　　本文是对外文《40 CSS Tools to Improve Your Productivity》的编译内容。

　　CSS工具是开发者和设计者所不可缺少的，它们不仅简化了工作流，还可提高CSS编写速度。本文将列举40种CSS工具，功能涉及CSS菜单、动画、3D图形、响应式页面、图层、按钮等界面元素的设计与制作。

　　yer Styles

　　CSS Compressor是一个采用Java开发的CSS压缩优化工具，可帮助开发者压缩CSS代码(如去掉空格、注释；合并相同规则的选择器；简短的颜色表示法等)，从而提高加载速度，节约网络流量。你可以根据压缩后代码的易读性，来选择压缩标准。“普通”模式使用得最多，可很好地平衡好CSS的压缩程度和易读性之间的关系。

　　5.Spritemapper

　　在线工具ExtractCSS可从HTML文档中提取与样式相关的信息，包括id、class及内联样式，并将它们生成CSS样式表。你所要做的就是键入或复制HTML文档，其余的留给ExtractCSS完成就可以了。利用该工具，我们可以将HTML中的内联样式快速抽离出来，十分方便。

　　7.Tridiv

　　免费Web应用Tridiv可以很容易地创建出漂亮的3D图形。使用该应用，我们可以创建4种不同的形状，包括长方体、、圆柱体和棱柱体，同时也可以对它们进行旋转并改变大小。

　　8.Sky CSS Tool

　　Responsive Web CSS是基于Web的一个工具，可用来创建响应式布局框架。你可以很容易地添加任意数量的页面和div，并定义它们的百分比宽度。

　　11.CSS Form Code Maker

　　CSS3 Patterns Gallery网站由Lea Verou创建，展示了利用CSS3创建的创新、外观美好的模型。该画廊中的模型越来越多，如果满足网站中的要求，任何人都可以提交新的模型。

　　15.CSS Menu Maker

　　Simptip是一个简单的基于Sass的CSS提示工具。你可以在网站的不同方向(上、左、右、下)加入提示信息，也可以为提示信息设置不同的颜色，如成功、信息、和。此外，该工具还提供了其他特性，如柔化边缘、半箭头、活动效果、渐变效果和多行提示等。

　　28.Slow.js

　　Hover.css是各种CSS3悬停特效的合集，应用的对象包括按钮、标识、图像等，支持CSS和SASS。因为Hover.css提供的大部分特效使用了CSS3，所以对一些较早的浏览器版本支持的不太好。

　　34.Animo.js

　　Animo.js是一个用于管理CSS动画、功能强大的小工具。它包含堆栈动画、创建跨浏览器的模糊，设置动画完成后的回调等特色功能。此外，它还包含惊人的 animate.css，提供了近60个美丽的动画，还加入了一些辅助动画。

　　35.CSS3 Animation Cheat Sheet

　　CSS3 Animation Cheat Sheet为一组预设的动画库，为你的Web项目增添各种绚丽的动画效果。你所要做的就是为你的网站添加样式表，并将编写好的CSS类用于要添加动画效果的元素上。

　　为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站，为你想要添加动画效果的元素应用预制的 CSS 类就可以了。

　　36.Spinkit

　　Create CSS3为CSS3代码生成工具，几乎包括了CSS3的所有属性，同时允许用户定制每个属性的值，并提供即时预览功能。很多规则可用于同一元素上，已生成的CSS代码也可再被编辑。

　　38.UIbox

　　UIBox是一个用户界面组件库。用户可根据Tag选项来选取自己所需的代码片段，如手风琴效果、按钮、日历、选择器、jQuery Tab选项卡、菜单、Tooltips提示代码等。

　　39.用CSS编写的加载旋转动画