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

作者: 纵昂 | 来源:发表于2022-10-27 20:47 被阅读0次

CSS样式-最有用的生成器(美化布局)
2.1.2CSS
JavaWeb—CSS
前端知识——CSS
CSS基础
CSS
CSS学习资源
【2016年特别福利】史上最全CSS学习资料大全
css笔记
2018-08-25

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

一、Buttons CSS generator

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

https://markodenic.com/tools/buttons-generator/.png 进入到页面点击该页面，点击需要的按钮复制即可。

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

<style>
.css-button-3d--rose {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #ff6392;
  box-shadow: 0 5px #ff0a78;
}
.css-button-3d--rose:hover {
  box-shadow: 0 3px #ff0a78;
  top: 1px;
}
.css-button-3d--rose:active {
  box-shadow: 0 0 #ff0a78;
  top: 5px;
}
</style>

<div class="content">
    <button class="css-button-gradient--9">乐刻健身</button>
</div>

预览按钮.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

<style>
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
</style>

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
</div>

三、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。链接地址