13个要收藏的前端 CSS 网站

使用 CSS 时,有很多任务可能具有挑战性且难以正常完成。这不是因为他们的困难,而是因为我们缺乏好用的 UI 生成工具。幸运的是,我们可以在网上找到一些工具。这些工具将填补空白,帮助我们更快、更有效地工作。

今天我们将分享一个关于CSS效果生成器的网站列表,这些网站可以帮助我们毫不费力地生成像素完美的 CSS效果。

现在,我们就开始今天的内容。

1.汉堡菜单生成器

网址:https://jonsuh.com/hamburgers/

它的特色:

  • 动画组件
  • 项目在 GitHub 上可用
  • 支持 95.43% 的浏览器
  • ARIA 友好
  • 高度可定制
  • 可用的 Sass 文件

在构建移动响应应用程序时,汉堡图标已成为一种广泛使用的模式。它通常放置在图形界面的顶角。它的目标是切换导航菜单。

在这个网站上,我们将能够从各种汉堡图标过渡中进行选择。它们都配备了为导航带来更多上下文的过渡。

用法非常简单:

  • 下载 CSS文件 并将其放在 <head> 标记中
  • 添加标记
  • 使用 css 类 hamburger--collapse 来切换状态

2.SVG 生成器

网址 : https://haikei.app/

特点:

  • 独特的设计
  • 可供选择的不断增长的模板库

这是一个生成独特的 svg 形状、背景和图案的工具。它会生成一个可以在您的站点上使用的 svg 对象或图像。首选的导出格式应该是 svg,因为它比传统的 png 具有很大的优势。

它是如何工作的?它是围绕生成器构建的。它确实集成了一些已经流行的 svg 生成器,例如 Waves。

3.网格生成器

网址: https://cssgrid-generator.netlify.app

特点:

  • 直观的界面
  • 代码生成

CSS Grid 布局前段时间得到了很好的支持。越来越多的 Web 开发人员每天都在使用它。但是,确定确切的细节可能很乏味。尤其是在我们不完全了解所有 CSS Grid 属性的开始时。

过这个站点,我们可以探索和创建您的自定义 CSS 网格布局。这将有助于加快进程。进一步理解这个 CSS 特性也很方便。

该站点的输出是一个 CSS 片段,我们可以将其粘贴到我们的 CSS 工作表文件中。

4.布局生成器

网址: https://layout.bradwoods.io

特点:

  • 多种选择
  • 代码生成
  • 响应式工具
  • 基本/高级界面

CSS 布局生成器是一个为布局组件创建 CSS 和 HTML 的工具。

创建新布局时,我们可以将此站点用作模板指南。我们将快速确定我们的布局是否最适合 Grid 或 Flex 实现。

一旦我们选择了模板,我们就可以进一步自定义我们的布局。结果,我们可以抓取生成的 CSS 并将其粘贴到我们的站点中。

5.布局模式

网址: https://web.dev/patterns/layout

特点:

  • 谷歌支持
  • 现代 CSS

包含最先进的 CSS 功能,例如容器查询

这是由 Google 构建的工具。他们相信开放、可访问、私有和安全的网络。这就是为什么他们向 Web 开发人员提供了一些像这样的工具。

大多数这些模式在内部使用 Grid 和 Flex。它不是一个静态列表,因为它会在未来不断增长。值得为此添加书签并定期检查。

6.剪辑路径生成器

网址: https://bennettfeely.com/clippy

特点:

  • 高度可定制
  • 直观的界面
  • 易于使用的代码输出

CSS cli-path 特性允许我们构建复杂的形状。它通过用多边形掩盖内容来工作。但是,构建该多边形可能具有挑战性。

使用此站点,您可以轻松地以交互方式构建该多边形。输出代码很简单,很容易集成到我们的 CSS 表中。

clip-path: polygon(25% 0%, 75% 0%, 100% 53%, 25% 100%, 0% 50%);

7.过渡动画生成器

网址: https://www.transition.style

特点:

  • 高度可定制
  • 有状态的可共享链接

CSS 过渡提供了一种精细控制属性动画速度的方法。我们可以选择以牺牲性能为代价使用 JavaScript 制作动画。因此,如果可能,我们希望使用 CSS 过渡。

// syntax
transition: <property> <duration> <timing-function> <delay>;

该站点提供了一组预定义的动画供您选择。它将 CSS 过渡与剪辑路径功能相结合,创造出出色的效果。它们很微妙,但可以极大地影响任何网站的用户体验。

这是生成的输出的示例:

@keyframes circle-in-hesitate {
0% {
clip-path: circle(0%);
}
40% {
clip-path: circle(40%);
}
100% {
clip-path: circle(125%);
}
}

[transition-style="in:circle:hesitate"] {
animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-hesitate both;
}

8.等待动画生成器

网址: https://waitanimate.wstone.uk

特点:

  • 便于使用

目前无法在动画再次循环之前暂停动画。这个工具就是为了这个目标而构建的。它计算动画关键帧时间的百分比以创建该效果。

手动执行此操作需要付出很多努力,并且需要更多尝试和错过。

9.三次贝塞尔生成器

网址 : https://cubic-bezier.com

特点:

  • 交互界面
  • 简单输出
  • 有状态的可共享链接

三次贝塞尔函数可用于定义动画计时函数。它由四个点 P0、P1、P2 和 P3 组成。它有助于微调我们的动画时间(慢启动、快启动、渐变等……)

使用此站点,我们将能够轻松生成自定义贝塞尔曲线。剩下的就是在我们的动画中使用输出代码:

animation: x 0.3s cubic-bezier(0,4,1,4) infinite;

10. 比例生成器

网址: https://maximeroudier.com/typeScaleClampGenerator

特点:

  • 模拟不同的分辨率
  • 范围选择器

字体是任何网站的关键方面。在设计网站时,重要的是要了解不同的字体大小如何一起使用。使用此 Web 应用程序,可以轻松创建一致的字体比例。

由于这将使用 rem 单位生成字体,因此查看不同基本大小字体的外观也很方便。默认值为 16px,它匹配任何浏览器的默认根字体。

11.渐变生成器

网址: https://cssgradient.io

特点:

  • 便于使用
  • 高度可定制

CSS Gradient 的生成是 Web 开发领域中最琐碎的任务之一。使用此工具,我们可以通过直观的界面创建漂亮的渐变。

我们可以结合形状、颜色甚至使用图像。我们可以抓取输出并将其粘贴到我们的代码库中。

12.调色板生成器

网址: https://mybrandnewlogo.com/color-palette-generator

特点:

  • 预定义的选择
  • 便于使用

在设计项目时,创建一致的方案调色板很重要。并非所有颜色都能很好地相互搭配。他们应该和谐地工作并传递正确的信息。手动执行此操作可能既麻烦又困难。

调色板生成工具帮助我们选择正确的颜色。我们可以浏览精心制作的设计列表。我们可以使用按钮按主题导航到所需的调色板。

13.实用程序 CSS 生成器

网址: https://html-css-js.com/css/generator/box-shadow

特点:

  • 便于使用

此网站是一个旨在解决前端开发人员最常见任务的工具。

我们可以创建渐变、框阴影、文本阴影、边框、边框半径……它没有其他的那么花哨,但以方便的方式拥有需要的大部分工具。

总结

以上就是我处理的CSS 任务时的首选工具,它们有助于改进我的工作流程并以交互方式完善我的用户交互。

© 版权声明

相关文章

暂无评论

暂无评论...