这 6 个 CSS 开源项目牛！-程序员宅基地

技术标签： css  github  百度  html  less  

本文盘点了 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/[email protected]/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 ，每天推荐一个好玩有趣的开源项目。最后，防止找不到本篇文章，可以收藏点赞，方便翻阅查找。

推荐阅读

1. GitHub 上有什么好玩的项目？

2. 这 2 个工作流自动化工具  yyds

3. 基于 Spring Boot 的百度云高仿项目

4. 盘点百度 4 个牛逼哄哄的开源项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47080540/article/details/120073049

智能推荐

VB 刷网站代码-程序员宅基地

文章浏览阅读89次。VB 刷网站代码 2011年03月18日　　以下代码送给开网站的朋友们　　↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓ ↓↓↓↓第 一 种↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓代 码↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓　　Dim..._网站刷pv源码 site:blog.csdn.net

unity ugui text 超链接和下划线，支持部分富文本格式_unity 下划线-程序员宅基地

文章浏览阅读1.6k次，点赞2次，收藏3次。项目需要用到该功能， 搜索和参考了很多文章，要么不支持富文本，要不没有下划线，要么是错误的，修修改改后满足我的需求，代码如下。_unity 下划线

避免在移动端页面中使用100vh_苹果浏览器 css 100vh-程序员宅基地

文章浏览阅读4.9k次，点赞5次，收藏5次。100vh带来的问题在CSS中，视口单位（Viewport units）听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度，那么你可以设置height: 100vh，这样你就拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可惜的是，事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏，使其几乎无用。最好避免使用100vh，而应该通过javascript设置高度的方..._苹果浏览器 css 100vh

基于Java毕业设计养老机构管理信息系统源码+系统+mysql+lw文档+部署软件-程序员宅基地

文章浏览阅读73次。基于Java毕业设计养老机构管理信息系统源码+系统+mysql+lw文档+部署软件。springboot基于springboot的学生社团管理系统的研究设计。springboot基于Springboot技术的装潢公司网站开发。springboot基于精细化考核的离散数学课程教学目标达成系统。springboot基于springboot食品销售网站。ssm基于ssm的再生产公益管理系统的设计与实现。ssm基于JAVA的求职招聘网站的设计与实现。ssm基于SpringMvC的流浪狗领养系统。

脑肿瘤图片数据集下载分享_yolo数据集下载-程序员宅基地

文章浏览阅读1.9w次，点赞2次，收藏3次。脑肿瘤图片数据集下载分享_yolo数据集下载

虚拟直播软件成为直播必备工具，实景直播和虚拟直播区别在哪里？-程序员宅基地

文章浏览阅读224次。虚拟直播与各行业的结合愈发紧密，技术的革新让很多线上活动可以通过虚拟直播完成。

随便推点

E5 2696v2 和至强 e5-2680v2 哪个好 E52696v2 和 e52680v2对比_2696v2和2680v2哪个好-程序员宅基地

文章浏览阅读2.1k次。TDP 热设计功耗 (TDP) 120 W 三级缓存 30 MB 内存类型 DDR3 800/1066/1333/1600/1866。e52696v2 采用Ivy Bridge架构 22 nm制作工艺十二核心二十四线程主频2.5 GHz最大睿频3.3 GHz。E52680V2十核心二十线程，主频2.8最大睿频3.6，L3缓存25M，22纳米工艺。组装电脑选E5 2696v2还是E52680V2怎么搭配更合适这些点很重要。_2696v2和2680v2哪个好

matlab就业,基于MATLAB的就业数据的聚类分析-程序员宅基地

文章浏览阅读402次。一 基 于 MATLAB的 就 业 数 据 的 聚 类 分 析 邹 全 常程威 贾月月 (常州 工学 院 电气 与光 电工程学 院 ，江苏 常州 213100) 摘 要 ：根据20lO年到2O13年我院校大学生就业情况 ，对大学生的就业数据进行 分析 。数据分析有很 多方法 ．本 文主要 采用 谱 系聚类 、K均值 聚类、模糊C均值 聚类三种 聚类方法 ，并得 出了结论 。 关键词 ：MATLAB..._matlab中聚类分析最多分析多少数据

mysql 大量close wait_线上大量CLOSE_WAIT原因排查-程序员宅基地

文章浏览阅读1k次。近日遇到一个线上服务 socket 资源被不断打满的情况。通过各种工具分析线上问题,定位到问题代码。这里对该问题发现、修复过程进行一下复盘总结。先看两张图。一张图是服务正常时监控到的 socket 状态，另一张当然就是异常啦！图一：正常时监控图二：异常时监控从图中的表现情况来看，就是从 04:00 开始，socket 资源不断上涨，每个谷底时重启后恢复到正常值，然后继续不断上涨不释放，而且每次达到..._mysql出现很多的close_wait,导致不能连接数据库

AI人工智能转录工具：AI Transcription for mac_al transcription-程序员宅基地

文章浏览阅读398次，点赞11次，收藏8次。AI Transcription for Mac是一款利用人工智能技术将音频和视频文件转录成文字的应用程序。它使用先进的语音识别技术和机器学习算法，可以全自动、离线的方式迅速转录音频和视频文件，并且能够提供高度准确的结果。_al transcription

Hadoop相关项目Hive-Pig-Spark-Storm-HBase-Sqoop-程序员宅基地

文章浏览阅读76次。目录HivePigSparkStormHBaseSqoopHivePig和Hive的对比摘要: Pig Pig是一种编程语言，它简化了Hadoop常见的工作任务。Pig可加载数据、表达转换数据以及存储最终结果。Pig内置的操作使得半结构化数据变得有意义（如日志文件）。同时Pig可扩展使用Java中添加的自定义数据类型并支持数据转..._spark pig sqoop

基于java的健身房管理系统设计与实现_java能查看用户的健身情况的健身管理系统-程序员宅基地

文章浏览阅读1.2k次，点赞4次，收藏18次。基于Java的健身房管理系统性能评估是对系统在特定工作负载下的响应速度和资源利用率进行评估和分析，旨在验证系统是否能够满足用户在实际使用中的性能需求。1、并发性能评估：并发性能是指系统在多用户同时访问的情况下的表现。通过模拟多个用户同时进行操作，评估系统的并发性能。可以观察系统是否能够正确处理并发请求，同时保持较好的响应速度。通过增加并发用户数，可以评估系统的并发处理能力和性能瓶颈。通过性能测试工具和性能监控工具，可以测量系统在不同并发负载下的响应时间、吞吐量和资源利用率。_java能查看用户的健身情况的健身管理系统

推荐文章

热门文章

相关标签