English ## 关于 - 总结一些常用的 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. ## 内容 ### 工具 - 三角形生成器 - 扇形生成器 - 卡券生成器 - 小于 12px 的文字生成器 ### 属性 - 滤镜 filter - flexbox - grid - object-fit, object-position - mix-blend-mode - list-style - text ### 动 - 提示气泡 - 手风琴 - 悬停 - 图片闪光 - 加载动画 loading - 弹簧动画 - 粘性球 - 抛物线 - 涟漪 - 波浪 ### 静 - 清除默认样式 - 滚动条样式 - media 参考 - 强制横屏 - 手型 - 投影 - rem, dpi 设置 - 纸页效果 - 彩色阴影 ### 技巧 - 垂直居中 - 高度自动撑满 - 消除图片间隙 & 图文居中 - 底部自适应 Sticky Footer - 三角形边框 - 文字超出显示省略号 - 插入换行 - 毛玻璃效果 - 参数列表自适应对齐 - 绝对定位宽度自动撑开 - 长文本折行 - 文字特效 - tab 栏底部动画 - tab 底部圆形边框衔接 - 圆形镂空 - 三角形镂空 - 多边形布局 ## 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 view online ## 关于猫 - vuepress-plugin-cat - live2d model