这六个 CSS 开源项目超牛!

本文盘点了 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/

< 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

  • 发表于:
  • 原文链接http://news.51cto.com/art/202109/680561.htm
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券