[[433212]]

今天繼續(xù)推薦提高我們摸魚時(shí)間的幾個(gè)神器，相信我，你會(huì)愛上他們的。

1. Neumorphism

地址：https://neumorphism.io/

這個(gè)網(wǎng)站為 section 或 div 生成對(duì)應(yīng)UI，它也可以自定義border-radius, box-shadow 等。

2. Shadows Brumm

地址：https://shadows.brumm.af/

它可以為我們生成多個(gè)分層陰影，一種非?？岬男Ч?，也可以從曲線中自定義顏色。

3. CSS Clip-path Maker

地址：https://bennettfeely.com/clippy/

這個(gè)算是我用的最多的，早期錄的CSS視頻，很多復(fù)雜點(diǎn)的效果都是用這個(gè)工具幫我生成，前列推薦。

4. Fancy Border Shape Generator

地址：https://9elements.github.io/fancy-border-radius/#30.36.29.30--.

它通過操作 border-radius 生成很 awesome 形狀，我們可以在項(xiàng)目中盡情的使用的，通過微調(diào)來達(dá)到我們想要的形狀。

5. Cubic Curve

地址：https://cubic-bezier.com/

為 CSS 動(dòng)畫生成cubic-bezier。

6. CSS Gradient

地址：https://cssgradient.io/

如果你的項(xiàng)目經(jīng)常需要使用漸變，那么，你會(huì)愛上這個(gè)網(wǎng)站。我用了很長(zhǎng)時(shí)間，它非常完美。在這里你也可以使用一些工具，比如漸變按鈕等等。

7. CSS Waves Generator

下面這三個(gè)波浪生成器可以生成任何類型的波浪，還在為畫破浪而苦惱的小伙伴可以用起來了。

CSS Waves

地址：https://getwaves.io/

它能生成簡(jiǎn)單的波浪，并有一些自定義功能。

Gradient Multiple Waves

地址：https://www.softr.io/tools/svg-wave-generator

它可以產(chǎn)生多個(gè)漸變波，非常棒。

Multiple Animated Waves

地址：https://svgwave.in/

它可以生成多個(gè)漸變波浪，但主要特點(diǎn)是它還可以為此生成實(shí)時(shí)動(dòng)畫。

8. CSS Grid Generator

CSS grid

地址：https://cssgrid-generator.netlify.app/

它為網(wǎng)格生成了很棒的css，你可以用div來定制它，它還會(huì)為它創(chuàng)建子元素。

CSS Grid Area

它可以生成網(wǎng)格區(qū)域。我們可以根據(jù)具體需要來命名和定制區(qū)域。

9. Loading Animated GIFs/SVGs

地址：https://loading.io/

這個(gè)網(wǎng)站可以生成多個(gè)加載動(dòng)畫，并以SVG、GIF、PNG和其他格式下載，但它的最大特點(diǎn)是你可以將這些動(dòng)畫定制到新的水平。

10. Free Icon Library

Flaticons

地址：https://www.flaticon.com/

這個(gè)庫(kù)有5.7M+矢量圖標(biāo)?？梢栽谶@里找到任何可能的圖標(biāo)，你可以使用它。

icons8

地址：https://icons8.com/

這個(gè)庫(kù)也有大量的圖標(biāo)，你可以定制它們，也可以直接使用圖標(biāo)，而無需下載它。

總結(jié)

希望你從這篇文章中學(xué)到了一些東西。

作者：Jatin Sharma 譯者：前端小智

來源：dev 原文：https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6