值得收藏的 CSS 资源

一、Neumorphism

官方网站:https://neumorphism.io/

此网站不但可以为section或div生成软UI,还可以自定义border-radius、box-shadow等。


css1.png

二、Shadows Brumm

官方网站:https://shadows.brumm.af/

可以生成多个分层阴影,提供非常酷的效果,你也可以自定义颜色。


css2.png

三、CSS Clip-path Maker

官方网站:https://bennettfeely.com/clippy/
可以生成具有各种不同形状的漂亮剪辑路径,非常方便。

css3.png

四、Fancy Border Shape Generator

官方网站:https://9elements.github.io/fancy-border-radius/

通过操纵border-radius生成各种形状,并且可以在项目的任何地方使用。你还可以更改形状的大小,以便根据项目偏好检查其外观。

css4.png

五、Cubic Curve

官方网站:https://cubic-bezier.com/

基本上,它的作用是为你在css中的动画生成贝塞尔曲线(cubic-bezier)。我们知道,使用动画的ease-in、ease-out等属性可以告诉浏览器动画的流程是什么。而你则可以在这里自定义这些属性。


css5.png

六、CSS Gradient

官方网站:https://cssgradient.io/

如果你经常要用到渐变,那么你一点会喜欢CSS Gradient。我已经用了很长时间,非常完美。而且你还可以在CSS Gradient上获得一些工具,比如渐变按钮等等。


css6.png

七、CSS波形生成器

7-1、CSS Waves

官方网站:https://getwaves.io/

通过一些自定义生成简单的波纹。


css7-1.png

7-2、Gradient Multiple Waves

官方网站:https://www.softr.io/tools/svg-wave-generator

可以生成多个渐变波,非常棒。


css7-2.png

7-3、Multiple Animated Waves

官方网站:https://svgwave.in/

可以生成多个渐变波,但主要特点是还能生成实时动画。


css7-3.png

八、CSS网格生成器

8-1、CSS grid

官方网站:https://cssgrid-generator.netlify.app/

可以为Grid生成很棒的css,你可以使用div对其进行自定义,它还将为此创建子元素。


css8.png

8-2、CSS Grid Area

官方网站:https://grid.layoutit.com/

生成Grid Area。你可以根据需要命名并自定义该区域。


css8-2.png

九、Loading Animated GIFs/SVGs

官方网站:https://loading.io/

在这里你可以生成多个加载动画并将其下载为SVG、GIF、PNG和其他格式,但它最棒的特点是你可以将这些动画自定义到一个新的水平。值得尝试。


css9.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容