值得收藏的 CSS 資源

一寇僧、Neumorphism

官方網(wǎng)站:https://neumorphism.io/

此網(wǎng)站不但可以為section或div生成軟UI豌熄,還可以自定義border-radius妻熊、box-shadow等纤勒。


css1.png

二、Shadows Brumm

官方網(wǎng)站:https://shadows.brumm.af/

可以生成多個分層陰影糙俗,提供非忱欤酷的效果,你也可以自定義顏色蔫劣。


css2.png

三坪郭、CSS Clip-path Maker

官方網(wǎng)站:https://bennettfeely.com/clippy/
可以生成具有各種不同形狀的漂亮剪輯路徑,非常方便脉幢。

css3.png

四歪沃、Fancy Border Shape Generator

官方網(wǎng)站:https://9elements.github.io/fancy-border-radius/

通過操縱border-radius生成各種形狀,并且可以在項目的任何地方使用嫌松。你還可以更改形狀的大小沪曙,以便根據(jù)項目偏好檢查其外觀。

css4.png

五萎羔、Cubic Curve

官方網(wǎng)站:https://cubic-bezier.com/

基本上液走,它的作用是為你在css中的動畫生成貝塞爾曲線(cubic-bezier)。我們知道贾陷,使用動畫的ease-in缘眶、ease-out等屬性可以告訴瀏覽器動畫的流程是什么。而你則可以在這里自定義這些屬性髓废。


css5.png

六磅崭、CSS Gradient

官方網(wǎng)站:https://cssgradient.io/

如果你經(jīng)常要用到漸變,那么你一點會喜歡CSS Gradient瓦哎。我已經(jīng)用了很長時間砸喻,非常完美。而且你還可以在CSS Gradient上獲得一些工具蒋譬,比如漸變按鈕等等割岛。


css6.png

七、CSS波形生成器

7-1犯助、CSS Waves

官方網(wǎng)站:https://getwaves.io/

通過一些自定義生成簡單的波紋癣漆。


css7-1.png

7-2、Gradient Multiple Waves

官方網(wǎng)站:https://www.softr.io/tools/svg-wave-generator

可以生成多個漸變波剂买,非常棒惠爽。


css7-2.png

7-3癌蓖、Multiple Animated Waves

官方網(wǎng)站:https://svgwave.in/

可以生成多個漸變波,但主要特點是還能生成實時動畫婚肆。


css7-3.png

八租副、CSS網(wǎng)格生成器

8-1、CSS grid

官方網(wǎng)站:https://cssgrid-generator.netlify.app/

可以為Grid生成很棒的css较性,你可以使用div對其進(jìn)行自定義用僧,它還將為此創(chuàng)建子元素。


css8.png

8-2赞咙、CSS Grid Area

官方網(wǎng)站:https://grid.layoutit.com/

生成Grid Area责循。你可以根據(jù)需要命名并自定義該區(qū)域。


css8-2.png

九攀操、Loading Animated GIFs/SVGs

官方網(wǎng)站:https://loading.io/

在這里你可以生成多個加載動畫并將其下載為SVG院仿、GIF、PNG和其他格式速和,但它最棒的特點是你可以將這些動畫自定義到一個新的水平意蛀。值得嘗試。


css9.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末健芭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子秀姐,更是在濱河造成了極大的恐慌慈迈,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件省有,死亡現(xiàn)場離奇詭異痒留,居然都是意外死亡,警方通過查閱死者的電腦和手機蠢沿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門伸头,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人舷蟀,你說我怎么就攤上這事恤磷。” “怎么了野宜?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵扫步,是天一觀的道長。 經(jīng)常有香客問我匈子,道長河胎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任虎敦,我火速辦了婚禮游岳,結(jié)果婚禮上政敢,老公的妹妹穿的比我還像新娘。我一直安慰自己胚迫,他們只是感情好喷户,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晌区,像睡著了一般摩骨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上朗若,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天恼五,我揣著相機與錄音,去河邊找鬼哭懈。 笑死灾馒,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的遣总。 我是一名探鬼主播睬罗,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼旭斥!你這毒婦竟也來了容达?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤垂券,失蹤者是張志新(化名)和其女友劉穎花盐,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體菇爪,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡算芯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了凳宙。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片熙揍。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖氏涩,靈堂內(nèi)的尸體忽然破棺而出届囚,到底是詐尸還是另有隱情,我是刑警寧澤是尖,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布奖亚,位于F島的核電站,受9級特大地震影響析砸,放射性物質(zhì)發(fā)生泄漏昔字。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望作郭。 院中可真熱鬧陨囊,春花似錦、人聲如沸夹攒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽咏尝。三九已至压语,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間编检,已是汗流浹背胎食。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留允懂,地道東北人厕怜。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像蕾总,于是被迫代替她去往敵國和親粥航。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容