12 个要收藏的前端 CSS 网站
英文 | https://betterprogramming.pub/12-front-end-css-generator-websites-to-bookmark-cc557079b0ac
翻译 | 杨小爱
动画组件。
项目在 GitHub 上可用。
支持 95.43% 的浏览器。
ARIA 友好。
高度可定制。
可用的 Sass 文件。
下载 CSS文件 并将其放在 <head> 标记中。
添加标记。
使用 css 类 hamburger--collapse 来切换状态。
独特的设计
可供选择的不断增长的模板库
直观的界面
代码生成
多种选择
代码生成
响应式工具
基本/高级界面
谷歌支持
现代 CSS
包含最先进的 CSS 功能，例如容器查询
高度可定制
直观的界面
易于使用的代码输出
clip-path: polygon(25% 0%, 75% 0%, 100% 53%, 25% 100%, 0% 50%);7、过渡动画生成器
网址: https://www.transition.style
特点：
高度可定制
有状态的可共享链接
CSS 过渡提供了一种精细控制属性动画速度的方法。我们可以选择以牺牲性能为代价使用 JavaScript 制作动画。因此，如果可能，我们希望使用 CSS 过渡。
// syntaxtransition: <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 任务时的首选工具，它们有助于改进我的工作流程并以交互方式完善我的用户交互。
学习更多技能