这六个 CSS 开源项目超牛！

 本文盘点了 6 个让人惊叹的开源项目，让你体会 CSS 的强大。之所以惊叹是因为如下项目都是使用 CSS 实现：

01. instagram.css 

这是一个纯 CSS 实现的 instagram 滤镜。

下载开源的 instagram.css 文件，在 HTML 中引入这个 instagram.css 文件。

开源地址： https : //picturepan2.github.io/instagram.css/

< link rel = "stylesheet" href = "dist/instagram.css" >

然后，可以将下方代码复制粘贴到 HTML 文件中，通过 [filter-name] 设置你想要的滤镜模式。

<figure 
class = "filter-[filter-name]" > 
 
< img src = "assets/img/instagram.jpg" > 
 
</ figure > 

 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 实现的效果竟能如此逼真。

地址：http s: //github. com /cyanharlow/purecss-francine

04. 濒临灭绝的动物

30 个 CSS 碎片拼图，30 种濒临灭绝动物

30 种稀有物种面临生存危机，通过 CSS 实现的 30 个碎片拼图呈现它们，你能看到它们在挣扎,在反抗，CSS 展现了 一场物种危机。

地址：http s: //www.webhek. com /misc- res /species-in-pieces/#

05.  NES.css

NES.css 是红白机风格（像 8bit 一样）的 CSS 框架，但是该框架 只提供组件，你需要定义你自己的布局。

地址：http s: //github. com /nostalgic-css/NES.css

通过 package manager 安装

npm install nes.css 
 
# or 
 
add 
 
nes.css 
 
JavaScript 
// script.js import "nes.css/css/nes.min.css"; 

您需要安装 css 加载程序

HTML

<!-- index.html --> 
 
< html > 
 
< head > 
 
< link rel = "stylesheet" href = "./node_modules/nes.css/css/nes.min.css" > 
 
</ head > 
 
< body > </ body > 
 
</ html > 

via CDN

<!-- non-minified --> 
 
< link href = "https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel = "stylesheet" /> 
 
<!-- latest --> 
 
< link href = "https://unpkg.com/nes.css@latest/css/nes.min.css" rel = "stylesheet" /> 
 
<!-- core style only --> 
 
< link href = "https://unpkg.com/nes.css/css/nes-core.min.css" rel = "stylesheet" /> 

06. Magic CSS 

Magic CSS 是一组简单的动画，可包含在 Web 或 app 项目中，提供具有特殊效果的 CSS3 动画。只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 magic.min.css 就可以使用了。

地址：http s: //github. com /miniMAC/magic