章
目
录
如何提高前端开发效率？尤其是css样式问题，实现一定复杂程度的css效果往往会花费大量的时间去调试优化。今天在这篇文章中，潘老师将为大家介绍一些可以提高前端开发效率的几个超棒的css资源网站，非常值得收藏，下面让我们一起来看一下。
1. Fancy Border Shape Generator
官方网站：https://9elements.github.io/fancy-border-radius/
通过调整border-radius生成各种形状，并且可以在项目的任何地方使用。也可以修改形状的大小，以便根据项目偏好检查其外观。
2. Shadows Brumm
官方网站：https://shadows.brumm.af/
可以生成多个分层阴影，提供相当炫酷的效果，你也可以根据自己的喜好自定义颜色。
3. CSS Clip-path Maker
官方网站：https://bennettfeely.com/clippy/
可以生成具有各种不同形状的漂亮剪辑路径，使用起来很方便。
4. Neumorphism
官方网站：https://neumorphism.io/
Neumorphism网站不但可以为section或div生成软UI，还可以自定义border-radius、box-shadow等。
5. Cubic Curve
官方网站：https://cubic-bezier.com/
它的主要作用就是为你在css中的动画生成贝塞尔曲线(cubic-bezier)。我们知道，使用动画的ease-in、ease-out等属性可以告诉浏览器动画的流程是什么，而你则可以在这里自定义这些属性。
6. CSS Gradient
官方网站：https://cssgradient.io/
如果你经常要用到渐变，那么你一点会喜欢CSS Gradient。我已经用了很长时间，非常完美。而且你还可以在CSS Gradient上获得一些工具，比如渐变按钮等等。
7. CSS波形生成器
我认为，这三个波形生成器都非常棒，可以生成任何类型的波纹，适合页脚或分隔部分等。
1）CSS Waves
官方网站：https://getwaves.io/
通过一些自定义生成简单的波纹。
2） Gradient Multiple Waves
官方网站：https://www.softr.io/tools/svg-wave-generator
可以生成多个渐变波，非常棒。
3）Multiple Animated Waves
官方网站：https://svgwave.in/
可以生成多个渐变波，但主要特点是还能生成实时动画。
8. CSS网格生成器
1）CSS grid
官方网站：https://cssgrid-generator.netlify.app/
可以为Grid生成很棒的css，你可以使用div对其进行自定义，它还将为此创建子元素。
2） CSS Grid Area
官方网站：https://grid.layoutit.com/
生成Grid Area。你可以根据需要命名并自定义该区域。
9. Loading Animated GIFs/SVGs
官方网站：https://loading.io/
在这里你可以生成多个加载动画并将其下载为SVG、GIF、PNG和其他格式，但它最棒的特点是你可以将这些动画自定义到一个新的水平。值得尝试。
10. 免费图标库
1）Flaticons
官方网站：https://www.flaticon.com/
这个库有570+万个以上的矢量图标。所以你可以在这里找到任何可能的图标，然后使用它。
2）icons8
官方网站：https://icons8.com/
这个库也有大量图标，你可以自定义，也可以直接使用图标而无需下载。
3）Font Awesome
官方网站：https://fontawesome.dashgame.com/
Font Awesome一套绝佳的图标字体库和CSS框架，提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
总结
以上介绍的提高前端开发的效率的css资源站是不是对你很有帮助呢？如果你有更好的css资源站推荐也可以留言评论哦！
