css3-tutorial.md

基础篇

• CSS 入门教程 | MDN
• CSS 基础教程 | MDN
• CSS 基础教程 | W3School

进阶篇

• Front-End-Checklist | CSS
• 【CSS 】 常见 CSS 布局
• CSS 实现水平 | 垂直居中漫谈
• 一劳永逸的搞定 flex 布局
• CSS 征途之 Background 点滴
• 使用纯 CSS 实现 Google Photos 照片列表布局
• How I started drawing CSS Images
• The Shapes of CSS | CSS-TRICKS
• 半深入理解 CSS3 object-position/object-fit 属性

动画篇

• css-animation-101: _{Learn how to bring animation to your web projet. https://cssanimation.rocks/}
• Using CSS animations
• CSS 动画简介
• CSS3 动画实践
• Using CSS Transitions on Auto Dimensions

CSS 动画库

• animate-css/animate.css: _{🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.}
• animate.css: _{Just-add-water CSS animations}
• typed.js: _{A JavaScript Typing Animation Library}
• hint.css: _{A CSS only tooltip library for your lovely websites. https://kushagragour.in/lab/hint}
• balloon.css: _{Simple tooltips made of pure CSS. https://kazzkiq.github.io/balloon.css}
• loaders.css: _{Delightful, performance-focused pure css loading animations.}
• Hover: _{A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS. http://ianlunn.github.io/Hover/}

JS 动画库

• anime.js: _{JavaScript Animation Engine http://animejs.com}
• animateplus: _{A+ animation module for the modern web}
• vivus: _{JavaScript library to make drawing animation on SVG}
• scenejs: _{🎬 Scene.js is JavaScript & CSS timeline-based animation library http://daybrush.com/scenejs}
• ola: _{🌊 Smooth animation library for interpolating numbers}
• airbnb/lottie: _{Lottie for Android, iOS, React Native, and Web}
• laxxx: _{Simple & light weight (2kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!}
• popmotion: _{Monorepo for Popmotion and Pose animation packages https://popmotion.io}
• VelocityJS: _{Accelerated JavaScript animation. http://VelocityJS.org}
• tween.js: _{JavaScript tweening engine for easy animations, incorporating optimised Robert Penner's equations.}
• WOW: _{Reveal CSS animation as you scroll down a page http://mynameismatthieu.com/WOW/}
• hsnaydd/moveTo: _{A lightweight scroll animation javascript library without any dependency}

规范篇

• 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
• 如何编写可维护的 CSS
• CSS、JS 、 HTML 编码规范

周边篇

• jareware/css-architecture: _{8 simple rules for a robust, scalable CSS architecture}
• css-doodle: _{🎨 A web component for drawing patterns with CSS.}
• CSS-Inspiration: _{CSS Inspiration，在这里找到写 CSS 的灵感!}
• JNKKKK/MoreToggles.css: _{A pure CSS library that provides you with a variety of nice-looking toggles}
• css-blocks: _{High performance, maintainable stylesheets. http://css-blocks.com/}
• smooth-code/xstyled: _{Consistent theme based CSS for styled-components & emotion 💅👩‍🎤}
• astrit/css.gg: _{500+ CSS Icons. Customizable, Retina Ready with API & NPM https://css.gg}
• pattle/simpsons-in-css: _{Simpsons characters in CSS}
• bouncejs 触摸库
• browserhacks
• 腾讯 css3 动画制作工具
• 志爷 css 小工具集合

CSS 样式库

• sanitize.css: _{A best-practices CSS foundation https://csstools.github.io/sanitize.css}
• sindresorhus/github-markdown-css: _{The minimal amount of CSS to replicate the GitHub Markdown style}
• primer/css: _{The CSS design system that powers GitHub https://primer.style/css}
• water.css: _{A just-add-css collection of styles to make simple websites just a little nicer}
• uncss: _{Remove unused styles from CSS}
• popmotion: _{A functional, flexible JavaScript motion library}

CSS 特效样式

• cssfx: _{✨ Beautifully simple click-to-copy CSS effects https://cssfx.lovejade.cn/}
• instagram.css: _{Instagram.css - Complete set of Instagram filters in pure CSS}
• QiShaoXuan/css_tricks: _{Some CSS tricks,一些 CSS 常用样式}

Css Framework

• tailwindcss: _{A utility-first CSS framework for rapid UI development. https://tailwindcss.com/}
• bulma: _{Modern CSS framework based on Flexbox https://bulma.io}
• ajusa/lit: _{World's smallest responsive 🔥 css framework (395 bytes)}

CSS in JS

• goober: _{🥜 goober, a less than 1KB 🎉css-in-js alternative with a familiar API}
• nyancss/nyancss: _{🌈 Write plain CSS while reaping benefits of CSS-in-JS https://nyancss.com}
• ben-rogerson/twin.macro: _{🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components and goober) at build time.}

相关篇

• sass/dart-sass: _{The reference implementation of Sass, written in Dart.}
• Postcss: _{Transforming styles with JS plugins http://postcss.org/}
• jss: _{JSS is an authoring tool for CSS which uses JavaScript as a host language. https://cssinjs.org}
• css-modules: _{Documentation about css-modules}
• postcss-cssnext: _{🌀 PostCSS plugin to use tomorrow's CSS syntax, today. http://cssnext.io/}
• normalize.css: _{A modern alternative to CSS resets http://necolas.github.io/normalize.css/}
• 30 Seconds of CSS: _{A curated collection of useful CSS snippets.}
• You-need-to-know-css: _{🖖CSS tricks web developers need to know~ https://lhammer.cn/You-need-to-know-css/}
• linkedin/css-blocks: _{High performance, maintainable stylesheets. http://css-blocks.com/}
• AllThingsSmitty/css-protips: _{A collection of tips to help take your CSS skills pro}
• 谈谈一些有趣的 CSS 话题: _{https://github.com/chokcoco/iCSS}
• Houdini：CSS 领域最令人振奋的革新
• linaria: _{Zero-runtime CSS in JS library https://linaria.now.sh}
• csstree: _{A tool set for working with CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations}