11个有用的css编辑网站

经过一系列踩坑及经验发现了 11 款非常好用的css编辑网站。

1、Neumorphism 链接:https://neumorphism.io/

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

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

2、Shadows Brumm 链接:https://shadows.brumm.af/

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

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

3、CSS Clip-path Maker 链接:https://bennettfeely.com/clippy/

官方网站:https://bennettfeely.com/clippy/ 其他: https://www.cssportal.com/css-clip-path-generator/

可以生成具有各种不同形状的漂亮剪辑路径,非常方便。

4、Fancy Border Shape Generator 链接:https://9elements.github.io/fancy-border-radius/

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

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

5、Cubic Curve 链接:https://cubic-bezier.com/

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

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

6、CSS Gradient 链接:https://cssgradient.io/

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

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

7、CSS波形生成器

7.1 CSS Waves

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

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

------------------------------------------------------------

7.2 Gradient Multiple Waves

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

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

------------------------------------------------------------

7.3 Multiple Animated Waves

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

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

8、CSS网格生成器

8.1 CSS grid

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

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

------------------------------------------------------------

8.2 CSS Grid Area

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

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

9、Loading Animated GIFs/SVGs 链接:https://loading.io/

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

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

10、免费图标库

10.1 Flaticons

官方网站: https://www.flaticon.com/

这个库有570+万个以上的矢量图标。所以你可以在这里找到任何可能的图标,然后使用它。

------------------------------------------------------------

10.2 icons8

官方网站: https://icons8.com/

这个库也有大量图标,你可以自定义,也可以直接使用图标而无需下载。

11、css Portal 链接:https://www.cssportal.com/

官方网站:https://www.cssportal.com/

以上就是非常好用的 值得收藏的网站,赶快收藏起来吧!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值