# code-snippet-css

**Repository Path**: coding-snippet/code-snippet-css

## Basic Information

- **Project Name**: code-snippet-css
- **Description**: 简短的css代码片段，满足您的所有开发需求。
- **Primary Language**: Unknown
- **License**: CC-BY-SA-4.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 3
- **Created**: 2022-04-07
- **Last Updated**: 2024-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CSS

## README

# css 代码片段

> 简短的 CSS 代码片段，满足您的所有开发需求。

## 介绍

- 我们收录的代码都是选择以实际开发中可能会用到的代码片段, 并且搭配了简短易于理解的文字分析。
- 以实际的小功能代码片段作为学习，比看书籍、文档的知识吸收更加有效果。实际的小功能更能让你理解与记忆知识点，甚至这些知识点你可能马上会运用到今后的学习与工作中。
- 每个非常小的代码片段也让你能够以更加轻松的方式学习，甚至可以非常方便的利用空闲时间段来充实自己。
- 代码段按照难易程序分为初级、中级、高级的代码。让我们可以根据自己的实际情况选择相应的等级。

## 目录导航

### 初级

| 标题                                                                                  | 标签      | 按钮                                                                      |
| ------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------- |
| [盒尺寸重置](./snippets/box-sizing-reset.md)                                          | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/Htmlls5vGeNpi7Z1zD8ZSh1dy) |
| [清除浮动](./snippets/clearfix.md)                                                    | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlTH4kJEFVnRKx7DAhAM68x) |
| [恒定的宽高比](./snippets/constant-width-to-height-ratio.md)                          | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlQOg0_sCkcedq7upohUrBE) |
| [弹性盒居中](./snippets/flexbox-centering.md)                                         | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html3g1L7w1ZqX3_w_RDvxcB4) |
| [网格居中](./snippets/grid-centering.md)                                              | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html4lRBpWXhn3pTurWMoTqos) |
| [3 标题布局](./snippets/tile-layout-using-inline-block.md)                            | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html4d7LmiiwhsICJ_n6YjXkd) |
| [使用 transform 让内容居中](./snippets/transform-centering.md)                        | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlAaiSEYEdu4XzxC2G-vfvI) |
| [单行文本截断](./snippets/truncate-text.md)                                           | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlV2K-0Rs-QyRmtDf4vg8Og) |
| [按钮填充动画](./snippets/button-hover-fill-animation.md)                             | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlP8Mm4rRXdReh4toQskYo-) |
| [按钮变大动画](./snippets/button-hover-grow-animation.md)                             | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/Htmlr1dlzwtdcojquKj9nwqvK) |
| [按钮收缩动画](./snippets/button-hover-shrink-animation.md)                           | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlbQy1vk4ZnboRryKJ7aYIU) |
| [荧光脉冲加载器](./snippets/pulse-loader.md)                                          | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/Htmly60ASW7Z0FY0lOfRTKU2-) |
| [放大缩小动画](./snippets/zoomin-zoomout-animation.md)                                | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlbYjqhTzL1YFgOUHHVBWJP) |
| [不可选择](./snippets/disable-selection.md)                                           | 交互      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlqeNSjMvCt7MFXEo0Ylf-L) |
| [带顶部三角形的边框](./snippets/border-with-top-triangle.md)                          | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmljFjm2DnMc0NVuXdrPHkmR) |
| [圆](./snippets/circle.md)                                                            | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlJa01Jd_fYGJU3SiC180Vl) |
| [自定义文本选择](./snippets/custom-text-selection.md)                                 | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlYee1hHrW4t8tWYY0Jfb6u) |
| [首字母放大](./snippets/drop-cap.md)                                                  | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlRz4Zq_6ewBGU_eJi8R-ts) |
| [导航列表项悬停和焦点效果](./snippets/navigation-list-item-hover-and-focus-effect.md) | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html-8zjDey_EYL9Vimm7ohpJ) |
| [重置所有样式](./snippets/reset-all-styles.md)                                        | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmllroPfn0Mb_nn2pG8Y6llK) |
| [条纹背景图案](./snippets/stripes-pattern.md)                                         | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlM8V5UT0gjiY4mWdARD1TQ) |
| [自定义内联引号](./snippets/stylized-quotation-marks.md)                              | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html3V9ubpRbXQ4lC6QLSr6ya) |
| [系统字体优先级](./snippets/system-font-stack.md)                                     | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlN_HQeK8FjsuYj6A_0ANI7) |
| [图片上显示文字](./snippets/text-backdrop-overlay.md)                                 | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlMY9-b8KRjmBJPdxry4mLQ) |
| [纯 css 创建三角形](./snippets/triangle.md)                                           | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmltrQFkr8m-ii6aXawh7qk6) |
| [斑马条纹列表](./snippets/zebra-striped-list.md)                                      | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlmPc4_zJcBU4SFs_vMWWzL) |
| [开关切换按钮](./snippets/toggle-switch.md)                                           | 视觉,交互 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlHKrNrDZRFohYxiqf_RnFb) |

### 中级

| 标题                                                           | 标签      | 按钮                                                                      |
| -------------------------------------------------------------- | --------- | ------------------------------------------------------------------------- |
| [表格居中](./snippets/display-table-centering.md)              | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmleJe6_2OeSR9jwSzd3JCTQ) |
| [均匀分布子元素](./snippets/evenly-distributed-children.md)    | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlQ8-BFDV7GXqYxdgvHN7ea) |
| [宽屏图片](./snippets/full-width.md)                           | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html26FL0fmDqa8njRea62QuI) |
| [响应式图像拼接](./snippets/image-mosaic.md)                   | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlYRhFBKBg497FQZE6fUsvY) |
| [多行文本截断](./snippets/truncate-text-multiline.md)          | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html8kgCaA2a1dWlubuVg9l2T) |
| [图像悬停菜单](./snippets/image-hover-menu.md)                 | 布局,动画 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlBTzIFxBvqJiAXRcOdBbZl) |
| [将图像放入容器中](./snippets/fit-image-in-container.md)       | 布局,视觉 | [Mipocde](http://www.mipcode.com/m/cn-30second/Html6DP3T-H0lfDlDFd8rw-KG) |
| [限制多行文字指定行数](./snippets/line-clamp.md)               | 布局,视觉 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlToap5b5GBDMcC1jMDHPjY) |
| [离屏](./snippets/offscreen.md)                                | 布局,视觉 | [Mipocde](http://www.mipcode.com/m/cn-30second/Html5_FRlzhF7WKXvh4M0ENnN) |
| [弹跳加载中](./snippets/bouncing-loader.md)                    | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlxqpZS14geSaDddLjrmi06) |
| [按钮边框动画](./snippets/button-border-animation.md)          | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlD1oSpre8uEBh230gTKrl8) |
| [按钮摆动动画](./snippets/button-focus-swing-animation.md)     | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html5HrMgVAgWDR4VIseNOG2m) |
| [环形旋转器](./snippets/donut-spinner.md)                      | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlqFW6u2Q3hb3GG2sUic2Kh) |
| [高度的过渡](./snippets/height-transition.md)                  | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlfjD02rebvR2R-rmik9woT) |
| [悬停时的透视变换](./snippets/hover-pespective.md)             | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html-nWeAEDs55EHsJ4kfIzEE) |
| [悬停阴影框动画](./snippets/hover-shadow-box-animation.md)     | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html8gAVj5oY1_QyALQzq8aen) |
| [响应式布局侧边栏](./snippets/responsive-layout-sidebar.md)    | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlucUSRjd-tuNokEE9PN4fQ) |
| [悬停时图像旋转](./snippets/image-hover-rotate.md)             | 动画,视觉 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlBTzIFxBvqJiAXRcOdBbZl) |
| [滚动进度条指示器](./snippets/scroll-progress-bar.md)          | 动画,视觉 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlI8_LNWYvnr3gsAkWPD9I1) |
| [三条横线菜单按钮](./snippets/hamburger-button.md)             | 交互      | [Mipocde](http://www.mipcode.com/m/cn-30second/Htmly8fwhHFlMrVrvc_GS_Qh5) |
| [水平滚动捕捉](./snippets/horizontal-scroll-snap.md)           | 交互      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlS_--bjVeeu7MfpCLhZn2P) |
| [弹出菜单](./snippets/popout-menu.md)                          | 交互      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlL6zd026X_efPCrbtWTDej) |
| [兄弟节点淡出](./snippets/sibling-fade.md)                     | 交互      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html3V76uW9i_ZKc_B55C1o1M) |
| [垂直滚动捕捉](./snippets/vertical-scroll-snap.md)             | 交互      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlgaalleDnXOQh42qacTTyu) |
| [前缀输入框](./snippets/input-with-prefix.md)                  | 交互,视觉 | [Mipocde](http://www.mipcode.com/m/cn-30second/Htmll-bUCQe6rBbjfHknOdNSf) |
| [棋盘背景图案](./snippets/checkerboard-pattern.md)             | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlvviEMLS_2Q6lCHZpOw0ex) |
| [动态阴影](./snippets/dynamic-shadow.md)                       | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlT52edtmEfmm28hxpKe0cf) |
| [蚀刻文字](./snippets/etched-text.md)                          | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/Htmlf-VEiIWcJvM8m_sPBs8j2) |
| [流体的排版](./snippets/fluid-typography.md)                   | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmliWqUVjMxn2R5gUEx9ZQE2) |
| [渐变文字](./snippets/gradient-text.md)                        | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlgEi-kG-6GjJCRD8iwy2bm) |
| [在悬停时显示附加内容](./snippets/hover-additional-content.md) | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlhhXEG0yJEqPXBnd7wJ1Fc) |
| [等距卡片](./snippets/isometric-card.md)                       | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlTiANYquPgfY-ENCvjCHrn) |
| [溢出滚动渐变](./snippets/overflow-scroll-gradient.md)         | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html_aTTjjLBmaY2d9_n_tsa_) |
| [圆点背景图案](./snippets/polka-dot-pattern.md)                | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html0R-5z8EQeG0QNWBY38WNd) |
| [漂亮的文字下划线](./snippets/pretty-text-underline.md)        | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlhSQH4DX0EYyk0TeDVkqSS) |
| [带形状的分割线](./snippets/shape-separator.md)                | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlGIt94pWpcau37ya6LGZ69) |
| [粘性标题列表](./snippets/sticky-list-titles.md)               | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlhkWzD8NIBiYUh_Hp_a3g2) |
| [获得焦点更改父元素外观](./snippets/focus-within.md)           | 视觉,交互 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmltyvzQRKhzI1TZ6T3lglRM) |

### 高级

| 标题                                                             | 标签      | 按钮                                                                      |
| ---------------------------------------------------------------- | --------- | ------------------------------------------------------------------------- |
| [瀑布流布局](./snippets/masonry-layout.md)                       | 布局      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlJVbFAsaXCGw6CQdo6xx-K) |
| [悬停下划线动画](./snippets/hover-underline-animation.md)        | 动画      | [Mipocde]()                                                               |
| [旋转卡片](./snippets/rotating-card.md)                          | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlaYAGOVmmU1rxNtivfmszX) |
| [菜单交错动画](./snippets/staggered-animation.md)                | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html-Cy-4x7KFeAh4QIR05DpC) |
| [打字机效果](./snippets/typewriter-effect.md)                    | 动画      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html3eclXAb_uurhYiiFwx0Ux) |
| [计数器](./snippets/counter.md)                                  | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlS9z5EKwsCnAIakq6paxC0) |
| [自定义滚动条](./snippets/custom-scrollbar.md)                   | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlpkhNoxDwEuX3HPZiWh3d1) |
| [带有浮动章节标题的列表](./snippets/floating-list-titles.md)     | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/Html_enwcCfPN5I0TwbwZ2wG-) |
| [全屏](./snippets/fullscreen.md)                                 | 视觉      | [Mipocde]()                                                               |
| [之字形背景图案](./snippets/zig-zag-pattern.md)                  | 视觉      | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlvN6tDaFR9f1paZ8zEMKzg) |
| [自定义复选框](./snippets/custom-checkbox.md)                    | 视觉,动画 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlABFo_I-A7ZRP0xIQxvFAd) |
| [悬停时的图像叠加](./snippets/image-overlay-hover.md)            | 视觉,动画 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlGnMHb8pid-g896hyKVUZk) |
| [鼠标渐变光标跟踪](./snippets/mouse-cursor-gradient-tracking.md) | 视觉,交互 | [Mipocde](http://www.mipcode.com/m/cn-30second/HtmlOmco-7IjrngWsY2Bo71rI) |

## 最佳实践建议

- 你可以大概预览一下目录导航，可以选择根据代码等级一个个的学习，又或者针对性的选择你感兴趣的内容进行学习。
- 当阅读文字对内容感到不是特别理解时，建议你搭配 Mipcode 链接进行在线编码预览学习。
- 假如这里收录的并没有你想要的代码片段，你可以进入到用户群中向网友们提问，总会有热心网友了解，并且愿意与你分享知识。

## 贡献指南

- 我们非常非常欢迎你能够参与到该项目的贡献，也许是文档中的错别字，也许是代码片段的描述并不易于理解，你有更好的描述。又或许是你想添加代码片段等等我们都欢迎你参与到社交共建中来。

- 该仓库的贡献也不会花费你非常多的时间，甚至大部分情况都不需要 cloen 仓库到本地，你只需要使用 Gitee 在线编辑好直接提交 pull request 即可。

- 假如你想要贡献，但又有不懂的地方，我们非常欢迎你能够进入到用户交流群中提问。

## 关于用户群

- 我们希望建立这个互帮互助群，如果你有困惑的问题，你可以大胆的在里面提问。每个人都有他所擅长的知识点，说不定你的问题是人家能够轻易解决的呢。
  ![756407161](assets/qq.jpg)

## 声明

- 特别感谢[30-seconds](https://github.com/30-seconds)，我们现在大部分的代码片段都是从 30-seconds 中翻译而来。
- 所有的代码片段在 CC-BY-SA-4.O 协议下许可，除非另有说明。