# Css

[腾讯云-正版图库直通车](https://pic.cloud.tencent.com/)

[不止于 CSS](https://github.com/chokcoco/iCSS): CSS 奇技淫巧，在这里，都有。

[UICN用户体验设计平台](https://www.ui.cn/)

[CSS 选择器参考手册-W3School](https://www.w3school.com.cn/cssref/css_selectors.asp)

[CSS（层叠样式表）| MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS)

[CSS3 transform 属性](https://www.runoob.com/cssref/css3-pr-transform.html)

[CSS 参考手册 web 前端开发参考手册系列](http://css.doyoe.com/)

[学习 CSS 布局](http://zh.learnlayout.com/)

[bootstrap 快速入门](http://www.imooc.com/learn/826)

[分享 10 个优美的程序猿把玩儿的实用科技设计酷站](http://www.jianshu.com/p/37a5998f6a20)

[2017 年最受欢迎的 10 个编程挑战网站](https://zhuanlan.zhihu.com/p/30164522)

[能解决 80% 需求的 10个 CSS动画库](https://blog.csdn.net/qq449245884/article/details/104047406)

2021-12-24 [css：repeating-linear-gradient 实现托尼老师理发店门口的灯柱子](https://pengshiyu.blog.csdn.net/article/details/122123425)

## 字体图标

[Font Awesome](https://fontawesome.com/)

[Font Awesome](https://fontawesome.dashgame.com/): 一套绝佳的图标字体库和 CSS 框架

[Iconfont](https://www.iconfont.cn/) 阿里巴巴矢量图标库

[Iconbox](https://arco.design/iconbox/libs) 字节跳动

[Boxicons](https://boxicons.com/)High Quality Web Icons

[Google Fonts](https://www.googlefonts.cn/) 谷歌字体中文版 | GoogleFonts

## 第三方库

[CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)

[normalize.css](https://github.com/necolas/normalize.css/)

[Hover.css](https://ianlunn.github.io/Hover/): CSS 鼠标悬浮动画

[Animate.css](https://animate.style/): A cross-browser library of CSS animations. As easy to use as an easy thing.
- github: [https://github.com/animate-css/animate.css](https://github.com/animate-css/animate.css)

[wickedCSS](https://github.com/kristofferandreasen/wickedCSS) CSS动画库

[CSShake](https://elrumordelaluz.github.io/csshake/) Some CSS classes to move your DOM!

[Animista](https://animista.net/) 在线生成 css 动画

[Angrytools](https://angrytools.com/css/animation/) CSS动画生成器

[Boxicons](https://boxicons.com/) High Quality Web Icons

[google fonts](https://fonts.google.com/) 
- github: [https://github.com/google/fonts/issues](https://github.com/google/fonts/issues)
- 中文版1：[https://www.googlefonts.cn/](https://www.googlefonts.cn/)
- 中文版2：[http://www.googlefonts.net/](http://www.googlefonts.net/)


游戏地址：

1. Flexbox froggy

https://flexboxfroggy.com/

2. Flexbox defense

http://www.flexboxdefense.com/

3. Knights of the Flexbox Table

地址：https://knightsoftheflexboxtable.com/

4. Flex Box adventure

地址：https://codingfantasy.com/games/flexboxadventure/play

5. Flexbox zombies

地址：https://mastery.games/flexboxzombies/

6. Grid garden

地址：https://cssgridgarden.com/

7. Grid attack

地址：https://codingfantasy.com/games/css-grid-attack/play

8. CSS Diner

地址：https://flukeout.github.io/

9. Guess CSS

地址：https://www.guess-css.app/

10. CSS Speedrun

地址：https://css-speedrun.netlify.app/


CSS 参考书https://cssreference.io/animations/

CSS 灵感https://chokcoco.github.io/CSS-Inspiration/#/

UI 设计师的灵感源泉https://www.awwwards.com/sites/zero-impact

学习 CSS 布局https://zh.learnlayout.com/box-sizing.html

CSS 小花招UI 设计师的灵感源泉https://www.awwwards.com/sites/zero-impact

https://css-tricks.com/

不过脑子的动效，不过看起来很“猛”https://tholman.com/obnoxious/



通过给萝卜浇水，学习 CSS 网格布局https://cssgridgarden.com/

通过做饭，练习 CSS 选择器https://flexboxfroggy.com/

配色https://mycolor.space/

还是配色https://clrs.cc/

CSS 渐变色https://cssgradient.io/

https://vue3js.cn/interview/

CSS Layout [https://csslayout.io/](https://csslayout.io/): Popular layouts and patterns made with CSS

loading.io [https://loading.io/](https://loading.io/) Animation Made Easy.

cssgr.id [https://cssgr.id/](https://cssgr.id/)

CSS Diner: [https://flukeout.github.io/](https://flukeout.github.io/)