# css_tricks

**Repository Path**: XinZhang1208/css_tricks

## Basic Information

- **Project Name**: css_tricks
- **Description**: Some CSS tricks,一些 CSS 常用样式
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-08-06
- **Last Updated**: 2021-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center"><img src="https://raw.githubusercontent.com/QiShaoXuan/css_tricks/master/logo.png"></div>

<a href='https://github.com/QiShaoXuan/css_tricks/blob/master/README_en.md'>English</a>

## 关于

- 总结一些常用的 CSS 样式
- 记录一些 CSS 的新属性和一点奇技淫巧
- 在“动”部分下有些动画并不是 CSS 效果，因为没有地方放置，所以暂时寄存在这里

尽量少说废话，代码简单易用，方便复制

> talk is cheap show me the code

## 快速开始

- Clone the `https://github.com/QiShaoXuan/css_tricks.git`
- Install package `npm install`
- Development run `npm run docs:dev`
- Open `http://localhost:8080` in your browser.

## 内容 

### 工具
- <a href="https://qishaoxuan.github.io/css_tricks/createTriangle/">三角形生成器</a>
- <a href="https://qishaoxuan.github.io/css_tricks/sector/">扇形生成器</a>
- <a href="https://qishaoxuan.github.io/css_tricks/hollowOut/"> 卡券生成器</a>
- <a href="https://qishaoxuan.github.io/css_tricks/smallFont/">小于 12px 的文字生成器</a>

### 属性
- <a href="https://qishaoxuan.github.io/css_tricks/filter/">滤镜 filter</a>
- <a href="https://qishaoxuan.github.io/css_tricks/flexbox/">flexbox</a>
- <a href="https://qishaoxuan.github.io/css_tricks/grid/">grid</a>
- <a href="https://qishaoxuan.github.io/css_tricks/object/">object-fit, object-position</a>
- <a href="https://qishaoxuan.github.io/css_tricks/mixBlendMode/">mix-blend-mode</a>
- <a href="https://qishaoxuan.github.io/css_tricks/list/">list-style</a>
- <a href="https://qishaoxuan.github.io/css_tricks/text/">text</a>

### 动
- <a href="https://qishaoxuan.github.io/css_tricks/poptip/">提示气泡</a>
- <a href="https://qishaoxuan.github.io/css_tricks/accordion/">手风琴</a>
- <a href="https://qishaoxuan.github.io/css_tricks/hover/">悬停</a>
- <a href="https://qishaoxuan.github.io/css_tricks/flash/">图片闪光</a>
- <a href="https://qishaoxuan.github.io/css_tricks/loading/">加载动画 loading</a>
- <a href="https://qishaoxuan.github.io/css_tricks/spring/">弹簧动画</a>
- <a href="https://qishaoxuan.github.io/css_tricks/stickyBall/">粘性球</a>
- <a href="https://qishaoxuan.github.io/css_tricks/parabola/">抛物线</a>
- <a href="https://qishaoxuan.github.io/css_tricks/notCSS/ripple">涟漪</a>
- <a href="https://qishaoxuan.github.io/css_tricks/notCSS/wave">波浪</a>

### 静
- <a href="https://qishaoxuan.github.io/css_tricks/reset/">清除默认样式</a>
- <a href="https://qishaoxuan.github.io/css_tricks/scrollTemp/">滚动条样式</a>
- <a href="https://qishaoxuan.github.io/css_tricks/media/">media 参考</a>
- <a href="https://qishaoxuan.github.io/css_tricks/landscapeScreen/">强制横屏</a>
- <a href="https://qishaoxuan.github.io/css_tricks/cursor/">手型</a>
- <a href="https://qishaoxuan.github.io/css_tricks/shadow/">投影</a>
- <a href="https://qishaoxuan.github.io/css_tricks/remDpi/">rem, dpi 设置</a>
- <a href="https://qishaoxuan.github.io/css_tricks/paper/">纸页效果</a>
- <a href="https://qishaoxuan.github.io/css_tricks/colorShadow/">彩色阴影</a>

### 技巧
- <a href="https://qishaoxuan.github.io/css_tricks/verticalMiddle/">垂直居中</a>
- <a href="https://qishaoxuan.github.io/css_tricks/autoHeight/">高度自动撑满</a>
- <a href="https://qishaoxuan.github.io/css_tricks/vertical/">消除图片间隙 & 图文居中</a>
- <a href="https://qishaoxuan.github.io/css_tricks/bottom/">底部自适应 Sticky Footer</a>
- <a href="https://qishaoxuan.github.io/css_tricks/triangle/">三角形边框</a>
- <a href="https://qishaoxuan.github.io/css_tricks/ellipsis/">文字超出显示省略号</a>
- <a href="https://qishaoxuan.github.io/css_tricks/lineBreak/">插入换行</a>
- <a href="https://qishaoxuan.github.io/css_tricks/glass/">毛玻璃效果</a>
- <a href="https://qishaoxuan.github.io/css_tricks/align/">参数列表自适应对齐</a>
- <a href="https://qishaoxuan.github.io/css_tricks/positionWidth/">绝对定位宽度自动撑开</a>
- <a href="https://qishaoxuan.github.io/css_tricks/longText/">长文本折行</a>
- <a href="https://qishaoxuan.github.io/css_tricks/textShadow/">文字特效</a>
- <a href="https://qishaoxuan.github.io/css_tricks/tab/">tab 栏底部动画</a>
- <a href="https://qishaoxuan.github.io/css_tricks/tab/circle-border.md">tab 底部圆形边框衔接</a>
- <a href="https://qishaoxuan.github.io/css_tricks/hollowOut/">圆形镂空</a>
- <a href="https://qishaoxuan.github.io/css_tricks/hollowOut/trangle.md">三角形镂空</a>
- <a href="https://qishaoxuan.github.io/css_tricks/polygonLayout/">多边形布局</a>


## Contributing

- Fork this repository
- Create your branch: `git checkout -b new-branch`
- Make your changes
- Commit your changes: `git commit -am 'Add some feature'`
- Push to the branch: `git push origin new-branch`
- Submit a pull request

也可以提交 issue 或直接评论，欢迎需求 ~

## JS Tricks

<a href="https://qishaoxuan.github.io/js_tricks/" target="_blank">view online</a>

## 关于猫

- <a href="https://github.com/QiShaoXuan/vuepress-plugin-cat" target="_blank">vuepress-plugin-cat</a>
- <a href="https://github.com/QiShaoXuan/live2DModel">live2d model</a>