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