CSS样式-最有用的生成器(美化布局)

CSS生成器可以为您节省大量时间和精力。
下面是最有用的CSS生成器:

一、Buttons CSS generator

你可以在你的项目中使用100多个按钮。链接地址

https://markodenic.com/tools/buttons-generator/.png

进入到页面点击该页面，点击需要的按钮复制即可。

点击需要的按钮复制即可.png

预览按钮.png

如果无布局相关可以根据业务需要更改，相对灵活，点击是有动效的

二、CSS Grid Generator

You can set the numbers, and units of your columns and rows, and it'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.
你可以设置列和行的数量和单位，它会为你生成一个CSS网格!在方框内拖动以创建放置在网格中的div。链接地址

http://cssgrid-generator.netlify.app.png

进到这个页面，选中想要的div布局，再点击"请给我生成示例代码"即可。

展示CSS代码.png

展示HTML代码.png

三、Neumorphism/Soft UI generator

CSS code generator that will help with colors, gradients, and shadows to adopt this new design trend or discover its possibilities.
CSS代码生成器，它将帮助颜色、渐变和阴影采用这种新的设计趋势或发现其可能性。链接地址

http://neumorphism.io.png

你选中的颜色.png

border-radius: 50px;
background: #6aa4c8;
box-shadow:  20px 20px 60px #5a8baa,
             -20px -20px 60px #7abde6;

四、Get Waves

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, and randomize!一个免费的SVG波发生器，使独特的SVG波为您的下一个网页设计。选择一条曲线，调整复杂度，随机化! 链接地址

http://getwaves.io.png

嗯呢，就是这样子.png

五、 AnimatiSS

一个漂亮的CSS动画集合，为您的web项目。 链接地址

http://xsgames.co/animatiss.png

随意选择一个

截屏2022-10-27 20.31.11.png

.scale-up-top-right{
animation:scale-up-top-right 0.4s; 
} 
@keyframes scale-up-top-right{
0%{transform:scale(.5);
transform-origin:top right
}100%{transform:scale(1);transform-origin:top right}}

六、Glassmorphism CSS Generator

Create a stunning glass effect for your UI designs.
为你的UI设计创建一个令人惊叹的玻璃效果。链接地址

http://markodenic.com/tools/glassmorphism-css-generator.png

background: rgba(255,255,255,0.25);
box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
backdrop-filter: blur(4.5px);
-webkit-backdrop-filter: blur(4.5px);
border-radius: 10px;

七、Keyframes

Keyframes help you write better CSS with a suite of tools to create CSS animations, box shadows, colors, & more.关键帧帮助您使用一套工具来创建CSS动画、框阴影、颜色等，从而更好地编写CSS。链接地址

https://keyframes.app.png

底部滚动的选项随便点击一个想要的，我点击了settings

截屏2022-10-27 20.39.42.png

点击Visual Theme弹出

点击Visual Theme.png

If you liked this thread, share it with your friends