收藏这几个开源库,写 css 你会笑出声

你是否遇到过写 css 没灵感,写不出酷炫的效果,那这篇文章你一定要看完。知道这几个开源库,它能让你写出炸天的效果并且有效地增加你的摸鱼时长。
1.CSS Inspiration
网址:https://chokcoco.github.io/CSS-Inspiration/#/


CSS Inspiration 上面有各种天马行空的 css 教程,涵盖了 css 的许多常见的特效。以分类的形式展示不同的 css 属性或者不同的课题,例如布局方式、border、伪元素、滤镜、背景 3D 等。这些都是 css 里面十分重要的知识点,不管是用于学习还是项目中实际运用都是不错的选择。
当然你也可以用来巩固基础知识,可以利用此项目来制作一些常用的特效,可以看到有上百个经典案例供我们参考,重点是提供源代码,复制粘贴即可使用。

2.Neumorphism

Neumorphism 属于新拟态 ui 风格,是目前比较新颖的一种前端 css 设计风格。它的格调简单,基本颜色比较浅,如米白、浅灰、浅蓝等。再利用阴影呈现出凹凸效果,看起来很简单舒适且有 3D 效果,因此我们可以通过拟态设计出很多优美的页面,拖动效果控制条即可秒生成 css 样式。

3.AnimXYZ

如果说你热衷于动画,那 animxyz 绝对是你的不二之选。你可以使用 animxyz 组合和混合不同的动画来创建自己的高度可定制的 css 动画,而无需编写一个单一的关键帧。

相比于 animate css,它的强大之处在于你可以在这里根据自己的想法来手动配置动画。实现的动画代码实例,我们可以复制迁移到项目中使用。
4.CodePen


最后要推荐的则是我最常用也是我最推荐的,它就是 codepen。codepen 是一个完全免费的前端代码托管服务,上面云集了各路大神,拥有全世界前端达人经典项目进行展示,让你从中获取到很多的创作灵感。
它可以实现即时预览,你甚至可以在线修改并及时预览别人的作品。支持多种主流预处理器,快速添加外部资源文件,只需在输入框里输入库名,codepen 就会从 cdn 上寻找匹配的 css 或 js 库。
相关内容拓展:(技术前沿)
近 10 年间,甚至连传统企业都开始大面积数字化时,我们发现开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。
针对这类问题,低代码把某些重复出现的场景、流程,具象化成一个个组件、api、数据库接口,避免了重复造轮子。极大的提高了程序员的生产效率。
介绍一款程序员都应该知道的软件 JNPF 快速开发平台,基于 Java/.Net 双技术引擎,专注于低代码,采用业内领先的 SpringBoot 微服务架构、支持 SpringCloud 模式,完善了平台的扩增基础,满足了系统快速开发、灵活拓展、无缝集成和高性能应用等综合能力;采用前后端分离模式,前端和后端的开发人员可分工合作负责不同板块,省事又便捷。
评论