一寇僧、Neumorphism
官方網(wǎng)站:https://neumorphism.io/
此網(wǎng)站不但可以為section或div生成軟UI豌熄,還可以自定義border-radius妻熊、box-shadow等纤勒。
二、Shadows Brumm
官方網(wǎng)站:https://shadows.brumm.af/
可以生成多個分層陰影糙俗,提供非忱欤酷的效果,你也可以自定義顏色蔫劣。
三坪郭、CSS Clip-path Maker
官方網(wǎng)站:https://bennettfeely.com/clippy/
可以生成具有各種不同形狀的漂亮剪輯路徑,非常方便脉幢。
四歪沃、Fancy Border Shape Generator
官方網(wǎng)站:https://9elements.github.io/fancy-border-radius/
通過操縱border-radius生成各種形狀,并且可以在項目的任何地方使用嫌松。你還可以更改形狀的大小沪曙,以便根據(jù)項目偏好檢查其外觀。
五萎羔、Cubic Curve
官方網(wǎng)站:https://cubic-bezier.com/
基本上液走,它的作用是為你在css中的動畫生成貝塞爾曲線(cubic-bezier)。我們知道贾陷,使用動畫的ease-in缘眶、ease-out等屬性可以告訴瀏覽器動畫的流程是什么。而你則可以在這里自定義這些屬性髓废。
六磅崭、CSS Gradient
官方網(wǎng)站:https://cssgradient.io/
如果你經(jīng)常要用到漸變,那么你一點會喜歡CSS Gradient瓦哎。我已經(jīng)用了很長時間砸喻,非常完美。而且你還可以在CSS Gradient上獲得一些工具蒋譬,比如漸變按鈕等等割岛。
七、CSS波形生成器
7-1犯助、CSS Waves
官方網(wǎng)站:https://getwaves.io/
通過一些自定義生成簡單的波紋癣漆。
7-2、Gradient Multiple Waves
官方網(wǎng)站:https://www.softr.io/tools/svg-wave-generator
可以生成多個漸變波剂买,非常棒惠爽。
7-3癌蓖、Multiple Animated Waves
官方網(wǎng)站:https://svgwave.in/
可以生成多個漸變波,但主要特點是還能生成實時動畫婚肆。
八租副、CSS網(wǎng)格生成器
8-1、CSS grid
官方網(wǎng)站:https://cssgrid-generator.netlify.app/
可以為Grid生成很棒的css较性,你可以使用div對其進(jìn)行自定義用僧,它還將為此創(chuàng)建子元素。
8-2赞咙、CSS Grid Area
官方網(wǎng)站:https://grid.layoutit.com/
生成Grid Area责循。你可以根據(jù)需要命名并自定義該區(qū)域。
九攀操、Loading Animated GIFs/SVGs
官方網(wǎng)站:https://loading.io/
在這里你可以生成多個加載動畫并將其下載為SVG院仿、GIF、PNG和其他格式速和,但它最棒的特點是你可以將這些動畫自定義到一個新的水平意蛀。值得嘗試。