Skip to content

前端工具

CSS 可视化

CSS 可视化汇总

地址:https://css.bqrdh.com

web-tool-001.png

扁平化图标

地址:https://neumorphism.io/

它创造了一种全新的 UI 风格。来自世界各地的设计师已经在 Dribbble 和 Behance 上看到了引人注目的中性设计。

web-tool-101.png

渐变的图标

地址:https://www.iconshock.com/svg-icons/

在设计的时候,我们都注重简约。不过,有时我们喜欢添加一些渐变效果,这样会显得图标层次更加丰富一些,而这个工具,就可以帮助我们提升工作效率,哪怕你没有设计能力,你也可以设计出漂亮的图标。

其他 ICON 网址:https://www.extrabux.cn/chs/guide/7254153

web-tool-201.png

动画

地址:https://animista.net/

庞大的动画库。在这里,你将找到可用于组件,照片和文本的基本,以及更高级的动画。

web-tool-601.png

动画缓动曲线

地址:https://easings.co/

在一系列界面上测试常见的缓动曲线。或生成自己的自定义贝塞尔曲线。

web-tool-301.png

动画按钮(磁吸)

地址:https://tympanus.net/Development/MagneticButtons/index.html

有一些有趣的悬停动画的磁性按钮。这些按钮的主要思想是它们具有磁性并跟随鼠标指针。除此之外,还有一些有趣的悬停动画可以玩。要探索的一件非常不错的事情是附加元素(例如阴影或另一条线)的运动。通过不同地移动按钮元素而创建的视差效果,使动画具有很好的扭曲效果。

web-tool-801.gif

背景图案

地址:https://www.magicpattern.design/tools/css-backgrounds

你可以在项目中使用漂亮的纯 CSS 背景图案。

web-tool-901.png

地址:https://bansal.io/pattern-css

仅用 CSS 库就可以完成美丽图案填充空背景效果。

web-tool-902.png

SVG 波浪

地址:https://svgwave.in/

一个在线工具,可以生成各种波浪效果的 SVG 图像,可以用于网页背景、按钮等。

web-tool-1001.png

自定义形状分隔线

地址:https://www.shapedivider.app/

划分布局和形状已经变得非常时尚。使用此工具,你可以创建可响应的波形和自定义形状分隔线。

web-tool-501.png

Released under the MIT License.