日本四虎影院
御用导航官方网站

你的位置:日本四虎影院 > 御用导航官方网站 > 御用导航官方网站 这六个 CSS 开源项现在超牛!

御用导航官方网站 这六个 CSS 开源项现在超牛!

发布日期:2021-09-18 08:35    点击次数:204

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

【编辑选举】御用导航官方网站

2021年五大开源式游玩化工具 按照CIS Docker Benchmarks规范的开源巡检脚本 淘客项现在Coupons在 Linux 环境安放指南 二十三张图详解路由制定:计算机网络的中央技术 Facebook 开源 Web 周围服务缓存引擎 CacheLib