GitHub上10个超火的CSS项目，寻找写CSS的灵感！

$poptipBg:#30363d;$color:#fff;$triangle:8px;$distance:-12px;.poptip{position:relative;z-index:101;&::before,&::after{visibility:hidden;opacity:0;transform:translate3d(0,0,0);transition:all0.3sease0.2s;box-调整大小：边框框；}&::before{content:"";position:absolute;width:0;height:0;border-style:solid;border-width:$triangle$triangle0$triangle;border-color:$poptipBgtransparenttransparenttransparent;left:calc(50%-#{$triangle});top:0px;transform:translateX(0%)translateY($distance);}&::after{font-size:14px;color:$color；内容：attr（aria-controls）；位置：绝对；填充：6px12px；空白：nowrap；z-index：-1；左：50%；底部：100%；转换：translateX(-50%)translateY($distance);background:$poptipBg;line-height:1;border-radius:2px;}&:hover::before,&:hover::after{visibility:visible;opacity:1;}}.btn{最小宽度：100px；行高：1.5;padding:5px10px;color:#fff;background:#00adb5;border-radius:4px;text-align:center;cursor:pointer;}效果：https://github.com/QiShaoXuan/css_tricksanimista有多种效果CSS实现，还有代码演示，方便直接复制代码，也可以复制压缩后的代码。如果您正在寻找某种CSS效果，可以在这里找到http://animista.net/spinkit各种加载效果的CSS代码片段集合。SpinKit仅使用（变换和不透明度）CSS动画来创建流畅且易于自定义的动画。https://tobiasahlin.com/spinkit/十天掌握CSS3这是来自前端大佬达摩的免费CSS3教程。对于有一定CSS2经验的小伙伴，可以让你系统的学习CSS3，快速理解并应用到工作中。里面的内容有讲解和代码练习。学完之后可以把学过的api实践一下，真是太好了。Supercat入门前端的时候，我也学习了里面的内容。虽然我现在都快忘记了:joy:，但是我学会了！.https://www.imooc.com/learn/33Animate是一个有趣的、跨浏览器的css3动画库，内置了很多典型的css3动画，兼容性好，使用方便。animate.css的使用非常简单，因为它把不同的动画绑定到不同的类上，所以你想使用哪个动画，只需要在元素中添加通用类animated和对应的类即可。作为一个前端开发，如果你不知道这个库，你真的会失败。https://animate.style/sassSass是CSS的预编译语言，Sass赋予了CSS更强大的特性。它提供了变量（variables）、嵌套（nestedrules）[混音（mixins）、函数（functions）等，完全兼容CSS语法。Sass可以帮助组织复杂的样式表，并使在项目内或跨项目共享设计变得容易。https://sass.bootcss.com/documentationlessLess是一种CSS预处理语言，它扩展了CSS语言并增加了变量、Mixin和函数等特性。Less可以运行在Node或浏览器上。https://less.bootcss.com/stylus富有表现力的、动态的、健壮的CSS。它提供了一种高效、动态和富有表现力的方式来生成CSS。支持缩进语法和常规CSS样式。https://stylus-lang.com/CSS预处理器技术已经非常成熟，越来越多的CSS预处理器框架应运而生。对于sass、less和stylus，在现在的vue和react项目中经常用到，用法也很简单。只要学会一个，其他两个就很好用了。项目中用哪一个就看你自己喜欢了。