l-hammer/You-need-to-know-css

# 🎢 一些有趣的项目

收藏一些CSS有趣的项目，欢迎补充完善~

### NES.css

NES红白机风格的 CSS 框架，主要的实现原理是通过将字体 [Press+Start+2P](https://fonts.google.com/specimen/Press+Start+2P) 和 `box-shadow` 巧妙的结合，非常有意思，尤其是icon的实现，强烈建议大家看下源码~ :thumbsup:

<!-- [NES.css](https://bcrikko.github.io/NES.css/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://bcrikko.github.io/NES.css/" width="100%" height="429px"></iframe>

?> **GitHub:** [BcRikko/NES.css](https://github.com/BcRikko/NES.css)

### Shapes generated

用CSS渐变实现的形状

<!-- [Shapes generated](https://yuanchuan.name/gradient-shapes/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://yuanchuan.name/gradient-shapes" width="100%" height="429px"></iframe>

?> **GitHub:** [yuanchuan/gradient-shapes](https://github.com/yuanchuan/gradient-shapes)

### CSS Grid Generator

动态生成 CSS Grid 代码!

<!-- [CSS Grid Generator](https://cssgrid-generator.netlify.com/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://cssgrid-generator.netlify.com/" width="100%" height="429px"></iframe>

?> **GitHub:** [sdras/cssgridgenerator](https://github.com/sdras/cssgridgenerator)

### Epic Spinners

CSS 加载动画

<!-- [Epic Spinners](https://epic-spinners.epicmax.co/#/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://epic-spinners.epicmax.co" width="100%" height="429px"></iframe>

?> **GitHub:** [epicmaxco/epic-spinners](https://github.com/epicmaxco/epic-spinners)

### CSS file icons

纯CSS实现的文件Icon

<!-- [CSS file icons](https://colorswall.github.io/CSS-file-icons/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://colorswall.github.io/CSS-file-icons" width="100%" height="429px"></iframe>

?> **GitHub:** [colorswall/CSS-file-icons](https://github.com/colorswall/CSS-file-icons)

<!-- ### THE COLOUR CLOCK

颜色时钟

[THE COLOUR CLOCK](http://thecolourclock.co.uk/ ':include :type=iframe width=100% height=429px')

?> 与之类似还有一个[hex color clock](http://www.jacopocolo.com/hexclock/), **GitHub:** [jacopocolo/Hex-clock](https://github.com/jacopocolo/Hex-clock) -->

### magic

CSS动画特效

<!-- [magic](https://minimamente.com/example/magic_animations/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://minimamente.com/example/magic_animations" width="100%" height="429px"></iframe>

?> **GitHub:** [miniMAC/magic](https://github.com/miniMAC/magic)

### A Single Div

只用一个HTML元素实现的CSS的绘图

<!-- [A Single Div](https://a.singlediv.com/ ':include :type=iframe width=100% height=429px') -->
<iframe src="https://a.singlediv.com" width="100%" height="429px"></iframe>

?> **GitHub:** [lynnandtonic/a-single-div](https://github.com/lynnandtonic/a-single-div)