12 个要收藏的前端 CSS 网站
英文 | https://betterprogramming.pub/12-front-end-css-generator-websites-to-bookmark-cc557079b0ac
翻譯 | 楊小愛
使用 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 任務時的首選工具，它們有助于改進我的工作流程并以交互方式完善我的用戶交互。
學習更多技能
請點擊下方公眾號
總結
以上是生活随笔為你收集整理的12 个要收藏的前端 CSS 网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux线上运维经验分享与故障排除技巧
- 下一篇： 切换IE浏览器代理开关.bat