{"id":15046727,"url":"https://github.com/qishaoxuan/css_tricks","last_synced_at":"2025-04-13T14:04:17.704Z","repository":{"id":37385048,"uuid":"149151909","full_name":"QiShaoXuan/css_tricks","owner":"QiShaoXuan","description":"Some CSS tricks - 一些 CSS 常用样式","archived":false,"fork":false,"pushed_at":"2023-12-05T09:46:29.000Z","size":29429,"stargazers_count":4094,"open_issues_count":77,"forks_count":417,"subscribers_count":60,"default_branch":"master","last_synced_at":"2025-04-13T14:04:04.345Z","etag":null,"topics":["css","css3"],"latest_commit_sha":null,"homepage":"https://qishaoxuan.github.io/css_tricks/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QiShaoXuan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-17T16:04:28.000Z","updated_at":"2025-04-09T08:41:39.000Z","dependencies_parsed_at":"2023-12-05T10:45:31.760Z","dependency_job_id":"397d466d-f745-4a91-8f45-67cd6f9ae2a6","html_url":"https://github.com/QiShaoXuan/css_tricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QiShaoXuan%2Fcss_tricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QiShaoXuan%2Fcss_tricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QiShaoXuan%2Fcss_tricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QiShaoXuan%2Fcss_tricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QiShaoXuan","download_url":"https://codeload.github.com/QiShaoXuan/css_tricks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248724640,"owners_count":21151561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3"],"created_at":"2024-09-24T20:53:29.546Z","updated_at":"2025-04-13T14:04:17.664Z","avatar_url":"https://github.com/QiShaoXuan.png","language":"CSS","readme":"\u003cdiv align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/QiShaoXuan/css_tricks/master/logo.png\"\u003e\u003c/div\u003e\n\n\u003ca href='https://github.com/QiShaoXuan/css_tricks/blob/master/README_en.md'\u003eEnglish\u003c/a\u003e\n\n## 关于\n\n- 总结一些常用的 CSS 样式\n- 记录一些 CSS 的新属性和一点奇技淫巧\n- 在“动”部分下有些动画并不是 CSS 效果，因为没有地方放置，所以暂时寄存在这里\n\n尽量少说废话，代码简单易用，方便复制\n\n\u003e talk is cheap show me the code\n\n## 快速开始\n\n- Clone the `https://github.com/QiShaoXuan/css_tricks.git`\n- Install package `npm install`\n- Development run `npm run docs:dev`\n- Open `http://localhost:8080` in your browser.\n\n## 内容 \n\n### 工具\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/createTriangle/\"\u003e三角形生成器\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/sector/\"\u003e扇形生成器\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/hollowOut/\"\u003e 卡券生成器\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/smallFont/\"\u003e小于 12px 的文字生成器\u003c/a\u003e\n\n### 属性\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/filter/\"\u003e滤镜 filter\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/flexbox/\"\u003eflexbox\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/grid/\"\u003egrid\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/object/\"\u003eobject-fit, object-position\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/mixBlendMode/\"\u003emix-blend-mode\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/list/\"\u003elist-style\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/text/\"\u003etext\u003c/a\u003e\n\n### 动\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/poptip/\"\u003e提示气泡\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/accordion/\"\u003e手风琴\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/hover/\"\u003e悬停\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/flash/\"\u003e图片闪光\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/loading/\"\u003e加载动画 loading\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/spring/\"\u003e弹簧动画\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/stickyBall/\"\u003e粘性球\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/parabola/\"\u003e抛物线\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/notCSS/ripple\"\u003e涟漪\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/notCSS/wave\"\u003e波浪\u003c/a\u003e\n\n### 静\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/reset/\"\u003e清除默认样式\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/scrollTemp/\"\u003e滚动条样式\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/media/\"\u003emedia 参考\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/landscapeScreen/\"\u003e强制横屏\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/cursor/\"\u003e手型\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/shadow/\"\u003e投影\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/remDpi/\"\u003erem, dpi 设置\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/paper/\"\u003e纸页效果\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/colorShadow/\"\u003e彩色阴影\u003c/a\u003e\n\n### 技巧\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/verticalMiddle/\"\u003e垂直居中\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/autoHeight/\"\u003e高度自动撑满\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/vertical/\"\u003e消除图片间隙 \u0026 图文居中\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/bottom/\"\u003e底部自适应 Sticky Footer\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/triangle/\"\u003e三角形边框\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/ellipsis/\"\u003e文字超出显示省略号\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/lineBreak/\"\u003e插入换行\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/glass/\"\u003e毛玻璃效果\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/align/\"\u003e参数列表自适应对齐\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/positionWidth/\"\u003e绝对定位宽度自动撑开\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/longText/\"\u003e长文本折行\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/textShadow/\"\u003e文字特效\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/tab/\"\u003etab 栏底部动画\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/tab/circle-border.md\"\u003etab 底部圆形边框衔接\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/hollowOut/\"\u003e圆形镂空\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/hollowOut/trangle.md\"\u003e三角形镂空\u003c/a\u003e\n- \u003ca href=\"https://qishaoxuan.github.io/css_tricks/polygonLayout/\"\u003e多边形布局\u003c/a\u003e\n\n\n## Contributing\n\n- Fork this repository\n- Create your branch: `git checkout -b new-branch`\n- Make your changes\n- Commit your changes: `git commit -am 'Add some feature'`\n- Push to the branch: `git push origin new-branch`\n- Submit a pull request\n\n也可以提交 issue 或直接评论，欢迎需求 ~\n\n## JS Tricks\n\n\u003ca href=\"https://qishaoxuan.github.io/js_tricks/\" target=\"_blank\"\u003eview online\u003c/a\u003e\n\n## 关于猫\n\n- \u003ca href=\"https://github.com/QiShaoXuan/vuepress-plugin-cat\" target=\"_blank\"\u003evuepress-plugin-cat\u003c/a\u003e\n- \u003ca href=\"https://github.com/QiShaoXuan/live2DModel\"\u003elive2d model\u003c/a\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqishaoxuan%2Fcss_tricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqishaoxuan%2Fcss_tricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqishaoxuan%2Fcss_tricks/lists"}