本文盘点了 6 个让人惊叹的开源项目,让你体会 CSS 的强大。之所以惊叹是因为如下项目都是使用 CSS 实现:Instagram 滤镜CSS 实现设备展示CSS 艺术画30 个 CSS 碎片拼图,30 种濒临灭绝动物红白机风格的 CSS 框架Magic CSS 01. Instagram.css 这是一个纯 CSS 实现的 Instagram 滤镜。 下载开源的 Instagram.css 文件,在 HTML 中引入这个 instagram.css 文件。 开源地址:https://picturepan2.github.io/instagram.css/ 然后,可以将下方代码复制粘贴到 HTML 文件中,通过 [filter-name] 设置你想要的滤镜模式。 02. Devices.css 如果你想在网站增添 iPhone X、iPhone 8 等移动设备用于展示的话,那么一定不要错过 Devices.css. 它是一个使用了纯 CSS 实现主流移动设备的库,并以现代设备为模版。 地址:https://picturepan2.github.io/devices.css/iPhone X iPhone 8 Google Pixel 2 XL Google Pixel Samsung Galaxy S8 iPad Pro Surface Pro Surface Book MacBook MacBook Pro Surface Studio iMac Pro Apple Watch 03. CSS 实现的艺术 下面这个妹子只使用 CSS 和 HTML 来创作艺术。 Francine 就是一个纯 CSS 制作、展示的 18 世纪风格的绘画作品。或许,你会惊讶 CSS 实现的效果竟能如此逼真。 地址:https://github.com/cyanharlow/purecss-francine 04. 濒临灭绝的动物 30 个 CSS 碎片拼图,30 种濒临灭绝动物 30 种稀有物种面临生存危机,通过 CSS 实现的 30 个碎片拼图呈现它们,你能看到它们在挣扎,在反抗,CSS 展现了一场物种危机。 地址:https://www.webhek.com/misc-res/species-in-pieces/# 05. NES.css NES.css 是红白机风格(像 8bit 一样)的 CSS 框架,但是该框架只提供组件,你需要定义你自己的布局。 地址:https://github.com/nostalgic-css/NES.css通过 package manager 安装npm install nes.css # or yarn add nes.cssJavaScript// script.js import "nes.css/css/nes.min.css";您需要安装 css 加载程序 HTML via CDN 06. Magic CSS Magic CSS 是一组简单的动画,可包含在 Web 或 app 项目中,提供具有特殊效果的 CSS3 动画。只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css 就可以使用了。 地址:https://github.com/miniMAC/magic