这 6 个 CSS 开源项目牛！

最新推荐文章于 2024-04-20 09:35:56 发布

逛逛GitHub

最新推荐文章于 2024-04-20 09:35:56 发布

阅读量584

点赞数

文章标签：百度 css less html github

本文链接：https://blog.csdn.net/weixin_47080540/article/details/120073049

版权

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

地址：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.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 就可以使用了。

地址：https://github.com/miniMAC/magic

欢迎关注公众号逛逛GitHub ，每天推荐一个好玩有趣的开源项目。最后，防止找不到本篇文章，可以收藏点赞，方便翻阅查找。

这 6 个 CSS 开源项目牛！

本文盘点了 6 个让人惊叹的开源项目，让你体会 CSS 的强大。之所以惊叹是因为如下项目都是使用 CSS 实现： Instagram 滤镜CSS 实现设备展示CSS 艺术画30 个 CSS 碎片拼图，30 种濒临灭绝动物红白机风格的 CSS 框架Magic CSS

通过 package manager 安装

“相关推荐”对你有帮助么？

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

Instagram 滤镜
CSS 实现设备展示
CSS 艺术画
30 个 CSS 碎片拼图，30 种濒临灭绝动物
红白机风格的 CSS 框架
Magic CSS