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

今天给大家带来的是GitHub 上超火的 10 个 CSS 项目，希望你在这里面找到写 CSS 的灵感！

喵~ 喵~ 喵~ 正文开始了，上车坐稳扶好了~

You-need-to-know-css

该项目是 CSS 的各种效果实现，尤其是动画效果。

笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档。

目前文档一共包含 43 个 CSS 的小样式（持续更新…），所以还是很不错的学习 CSS 的项目来的。

比如：打字效果

<style>

main{

width:100%;height:229px;

display:flex;

justify-content:center;

align-items:center;

}

span{

display:inline-block;

width:21ch;

font:bold200%Consolas,Monaco,monospace;/*等宽字体*/

overflow:hidden;

white-space:nowrap;

font-weight:500;

border-right:1pxsolidtransparent;

animation:typing10ssteps(21),caret.5ssteps(1)infinite;

}

@keyframestyping{

from{

width:0;

}

}

@keyframescaret{

50%{border-right-color:currentColor}

}

</style>

<template>

<mainclass="main">

<span>前端GitHub</span>

</main>

</template>

<script>

</script>

https://lhammer.cn/You-need-to-know-css/#/zh-cn/

CSS-Inspiration

这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

包含了：布局(Layout)、阴影(box-shadow、drop-shadow)、伪类/伪元素、滤镜(fliter)、边框(border)、背景/渐变(linear-gradient/radial-gradient/conic-gradient)、混合模式（mix-blend-mode/background-blend-mode)、3D、动画/过渡(transition/animation)、clip-path、文本类、综合、CSS-Doodle、SVG 等内容。

比如：巧用 CSS 实现酷炫的充电动画

https://github.com/chokcoco/CSS-Inspiration

css_tricks

该项目总结了一些常用的 CSS 样式，记录一些 CSS 的新属性和一点奇技淫巧。

比如提示气泡的效果

<divclass="poptipbtn"aria-controls="弹出气泡">poptip</div>

$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-sizing:border-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;

content:attr(aria-controls);

position:absolute;

padding:6px12px;

white-space:nowrap;

z-index:-1;

left:50%;

bottom:100%;

transform:translateX(-50%)translateY($distance);

background:$poptipBg;

line-height:1;

border-radius:2px;

}

&:hover::before,

&:hover::after{

visibility:visible;

opacity:1;

}

}

.btn{

min-width:100px;

line-height:1.5;

padding:5px10px;

color:#fff;

background:#00adb5;

border-radius:4px;

text-align:center;

cursor:pointer;

}