Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/QiShaoXuan/css_tricks
Some CSS tricks - 一些 CSS 常用样式
https://github.com/QiShaoXuan/css_tricks
css css3
Last synced: 2 months ago
JSON representation
Some CSS tricks - 一些 CSS 常用样式
- Host: GitHub
- URL: https://github.com/QiShaoXuan/css_tricks
- Owner: QiShaoXuan
- Created: 2018-09-17T16:04:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-05T09:46:29.000Z (about 1 year ago)
- Last Synced: 2024-10-29T15:47:28.967Z (2 months ago)
- Topics: css, css3
- Language: CSS
- Homepage: https://qishaoxuan.github.io/css_tricks/
- Size: 28.1 MB
- Stars: 4,051
- Watchers: 61
- Forks: 412
- Open Issues: 77
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-fe-study-source - CSS tricks
- awesome-star-libs - QiShaoXuan / css_tricks
README
## 关于
- 总结一些常用的 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
## 关于猫