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

<style>   main {     width: 100%; height: 229px;     display: flex;     justify-content: center;     align-items: center;   }   span {     display: inline-block;     width: 21ch;     font: bold 200% Consolas, Monaco, monospace;   /*等宽字体*/     overflow: hidden;     white-space: nowrap;     font-weight: 500;     border-right: 1px solid transparent;     animation: typing 10s steps(21), caret .5s steps(1) infinite;   }   @keyframes typing{     from {         width: 0;     }   }   @keyframes caret{     50% { border-right-color: currentColor}   } </style> <template>   <main class="main">     <span>前端GitHub</span>   </main> </template> <script> </script> 

<div class="poptip btn" 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: all 0.3s ease 0.2s;     box-sizing: border-box;   }   &::before {     content: "";     position: absolute;     width: 0;     height: 0;     border-style: solid;     border-width: $triangle $triangle 0 $triangle;     border-color: $poptipBg transparent transparent transparent;     left: calc(50% - #{$triangle});     top: 0px;     transform: translateX(0%) translateY($distance);   }    &::after {     font-size: 14px;     color: $color;     content: attr(aria-controls);     position: absolute;     padding: 6px 12px;     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: 5px 10px;   color: #fff;   background: #00adb5;   border-radius: 4px;   text-align: center;   cursor: pointer; }