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