关于 About

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

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

talk is cheap show me the code

在线查看 View online

CSS tricks

快速开始 Quick start

  git clone https://github.com/QiShaoXuan/css_tricks.git
  cd css_tricks
  npm install
  npm run docs:dev

内容 inclued

工具

• 三角形生成器
• 扇形生成器

属性

• 滤镜 filter
• flexbox
• grid
• object-fit, object-position
• mix-blend-mode
• list-style

动

• 提示气泡
• 手风琴
• 悬停
• 加载动画
• 弹簧动画
• 抛物线
• 涟漪
• 波浪

静

• 清除默认样式
• 滚动条样式
• midea 参考
• 手型
• 投影
• rem, dpi 设置
• 纸页效果

技巧

• 垂直居中
• 底部自适应
• 三角形边框
• 文字超出显示省略号
• 插入换行
• 毛玻璃效果
• 绝对定位宽度自动撑开
• 长文本折行
• 文字特效
• 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

or submit an issue, any helpful suggestions are welcomed

JS Tricks

view online