Css
不止于 CSS: CSS 奇技淫巧,在这里,都有。
2021-12-24 css:repeating-linear-gradient 实现托尼老师理发店门口的灯柱子
字体图标
Font Awesome: 一套绝佳的图标字体库和 CSS 框架
Iconfont 阿里巴巴矢量图标库
Iconbox 字节跳动
BoxiconsHigh Quality Web Icons
Google Fonts 谷歌字体中文版 | GoogleFonts
第三方库
Hover.css: CSS 鼠标悬浮动画
Animate.css: A cross-browser library of CSS animations. As easy to use as an easy thing.
wickedCSS CSS动画库
CSShake Some CSS classes to move your DOM!
Animista 在线生成 css 动画
Angrytools CSS动画生成器
Boxicons High Quality Web Icons
- github: https://github.com/google/fonts/issues
- 中文版1:https://www.googlefonts.cn/
- 中文版2:http://www.googlefonts.net/
游戏地址:
- Flexbox froggy
- Flexbox defense
http://www.flexboxdefense.com/
- Knights of the Flexbox Table
地址:https://knightsoftheflexboxtable.com/
- Flex Box adventure
地址:https://codingfantasy.com/games/flexboxadventure/play
- Flexbox zombies
地址:https://mastery.games/flexboxzombies/
- Grid garden
- Grid attack
地址:https://codingfantasy.com/games/css-grid-attack/play
- CSS Diner
地址:https://flukeout.github.io/
- Guess CSS
- 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://tholman.com/obnoxious/
通过给萝卜浇水,学习 CSS 网格布局https://cssgridgarden.com/
通过做饭,练习 CSS 选择器https://flexboxfroggy.com/
还是配色https://clrs.cc/
CSS 渐变色https://cssgradient.io/
CSS Layout https://csslayout.io/: Popular layouts and patterns made with CSS
loading.io https://loading.io/ Animation Made Easy.
cssgr.id https://cssgr.id/
CSS Diner: https://flukeout.github.io/
Flex Cheatsheet: Demos for W3C CSS Flexbox Specification http://www.w3.org/TR/css-flexbox-1/