身为前端切图仔，你应该知道的这些网站，助你实现酷炫的 CSS 效果

谁践踏了优雅 2022-10-17 11:27 124阅读 0赞

1、Neumorphism

[https://neumorphism.io/][https_neumorphism.io]

它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

2、带有渐变的图标

[https://www.iconshock.com/svg-icons/][https_www.iconshock.com_svg-icons]

在设计的时候，我们都注重简约。不过，有时我们喜欢添加一些渐变效果，这样会显得图标层次更加丰富一些，而这个工具，就可以帮助我们提升工作效率，哪怕你没有设计能力，你也可以设计出漂亮的图标。这些精美的图标和大量渐变可为你提供创作灵感。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

3、Interactions

[https://easings.co/][https_easings.co]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]

4、大型数据库

[https://bansal.io/pattern-css][https_bansal.io_pattern-css]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]

5、自定义形状分隔线

[https://www.shapedivider.app/][https_www.shapedivider.app]

使用此工具，可以创建可响应的波形和自定义形状分隔线。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 1]

6、动画

[https://animista.net/][https_animista.net]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]  
7、动画按钮

[https://tympanus.net/Development/MagneticButtons/index.html][https_tympanus.net_Development_MagneticButtons_index.html]

有一些有趣的悬停动画的磁性按钮。  
![在这里插入图片描述][2021060308371267.gif_pic_center]

8、背景图案

[https://www.magicpattern.design/tools/css-backgrounds][https_www.magicpattern.design_tools_css-backgrounds]

你可以在项目中使用漂亮的纯CSS背景图案。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]

9、SVG波浪

[https://getwaves.io/][https_getwaves.io]

最后一个工具是波浪效果生成器。它使用简单，可以制作多个图层并对其进行修改。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 2]

[https_neumorphism.io]: https://neumorphism.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/544611460305428cb98e4255d7aa3eb4.png
[https_www.iconshock.com_svg-icons]: https://www.iconshock.com/svg-icons/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221014/472efb828e5c4d5fafb788819e719b8a.png
[https_easings.co]: https://easings.co/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]: /images/20221014/780695e09f8147b3a831cd9e68b33adf.png
[https_bansal.io_pattern-css]: https://bansal.io/pattern-css
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221014/0e51dc4074df46a0b73fe1b5c8010699.png
[https_www.shapedivider.app]: https://www.shapedivider.app/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 1]: /images/20221014/b8b64ef6628b4b6bbea38b387abf3878.png
[https_animista.net]: https://animista.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221014/906d917b2fd64959969589ca1246495c.png
[https_tympanus.net_Development_MagneticButtons_index.html]: https://tympanus.net/Development/MagneticButtons/index.html
[2021060308371267.gif_pic_center]: /images/20221014/d2c33d98a4204205a39915706742a2b9.png
[https_www.magicpattern.design_tools_css-backgrounds]: https://www.magicpattern.design/tools/css-backgrounds
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221014/309c03f03fd043fd8782706924a5a4c9.png
[https_getwaves.io]: https://getwaves.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70 2]: /images/20221014/7569e4e773e3404fb2506a3cd5efb0d9.png