{"id":15046719,"url":"https://github.com/chokcoco/icss","last_synced_at":"2025-05-14T12:06:22.557Z","repository":{"id":37335808,"uuid":"68592809","full_name":"chokcoco/iCSS","owner":"chokcoco","description":"不止于 CSS","archived":false,"fork":false,"pushed_at":"2025-02-05T09:28:04.000Z","size":635,"stargazers_count":20219,"open_issues_count":243,"forks_count":2042,"subscribers_count":648,"default_branch":"master","last_synced_at":"2025-04-27T03:56:01.409Z","etag":null,"topics":["css","css3"],"latest_commit_sha":null,"homepage":"","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/chokcoco.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,"zenodo":null}},"created_at":"2016-09-19T09:55:32.000Z","updated_at":"2025-04-27T01:47:00.000Z","dependencies_parsed_at":"2023-02-09T15:31:13.736Z","dependency_job_id":"bb7fe75e-d75b-49d6-be18-4fe53151da2c","html_url":"https://github.com/chokcoco/iCSS","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/chokcoco%2FiCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chokcoco%2FiCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chokcoco%2FiCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chokcoco%2FiCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chokcoco","download_url":"https://codeload.github.com/chokcoco/iCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251085194,"owners_count":21533841,"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:25.665Z","updated_at":"2025-04-27T03:56:09.368Z","avatar_url":"https://github.com/chokcoco.png","language":"CSS","readme":"\r\n## ![logo](https://github.com/chokcoco/iCSS/blob/master/logo.jpg?raw=true)\r\n\r\nCSS 奇技淫巧，在这里，都有。\r\n\r\n本 Repo 围绕 **CSS/Web动画** 展开，谈一些有趣的话题，内容天马行空，想到什么说什么，不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节。\r\n\r\n所有内容都在 [Issues](https://github.com/chokcoco/iCSS/issues) 中，同步更新到我的[个人博客](http://www.cnblogs.com/coco1s/)，觉得不错的可以点个 `star` 收藏支持。\r\n\r\n### 按分类进行阅读\r\n\r\n [![Background](https://img.shields.io/badge/Background-white)](https://github.com/chokcoco/iCSS/labels/Background) [![Border](https://img.shields.io/badge/Border-yellow)](https://github.com/chokcoco/iCSS/labels/Border) [![clip-path](https://img.shields.io/badge/clip%20path-pink)](https://github.com/chokcoco/iCSS/labels/clip-path) [![Mask](https://img.shields.io/badge/Mask-indigo)](https://github.com/chokcoco/iCSS/labels/Mask) [![Shadow](https://img.shields.io/badge/Shadow-lightsalmon)](https://github.com/chokcoco/iCSS/labels/Shadow) [![Shape](https://img.shields.io/badge/Shape-lightseagrenn)](https://github.com/chokcoco/iCSS/labels/Shape) [![混合模式](https://img.shields.io/badge/混合模式-royalblue)](https://github.com/chokcoco/iCSS/labels/混合模式) [![滤镜](https://img.shields.io/badge/滤镜-silver)](https://github.com/chokcoco/iCSS/labels/滤镜) [![伪类](https://img.shields.io/badge/伪类-linen)](https://github.com/chokcoco/iCSS/labels/伪类)\r\n\r\n[![CSS Layout](https://img.shields.io/badge/CSS%20Layout-palevioletred)](https://github.com/chokcoco/iCSS/labels/Layout) [![CSS Function](https://img.shields.io/badge/CSS%20Function-red)](https://github.com/chokcoco/iCSS/labels/CSS%20Function) [![CSS-Houdini](https://img.shields.io/badge/CSS%20Houdini-gray)](https://github.com/chokcoco/iCSS/labels/CSS%20Houdini) [![CSS Variable](https://img.shields.io/badge/CSS%20Variable-cyan)](https://github.com/chokcoco/iCSS/labels/CSS%20Variable) [![CSS 新特性](https://img.shields.io/badge/CSS%20新特性-gold)](https://github.com/chokcoco/iCSS/labels/CSS%20新特性) [![CSS-doodle](https://img.shields.io/badge/CSS%20doodle-deeppink)](https://github.com/chokcoco/iCSS/labels/CSS-doodle) [![Modern CSS](https://img.shields.io/badge/Modern%20CSS-khaki)](https://github.com/chokcoco/iCSS/labels/Modern%20CSS) \r\n\r\n[![动效](https://img.shields.io/badge/动效-navy)](https://github.com/chokcoco/iCSS/labels/动效) [![动画](https://img.shields.io/badge/动画-oldlace)](https://github.com/chokcoco/iCSS/labels/动画) [![可访问性](https://img.shields.io/badge/可访问性-orchid)](https://github.com/chokcoco/iCSS/labels/可访问性（Accessibility）) [![3D 效果](https://img.shields.io/badge/3D%20效果-blue)](https://github.com/chokcoco/iCSS/labels/3D) [![图片效果](https://img.shields.io/badge/图片效果-orange)](https://github.com/chokcoco/iCSS/labels/图片效果) [![文字效果](https://img.shields.io/badge/文字效果-plum)](https://github.com/chokcoco/iCSS/labels/文字效果) [![边框效果](https://img.shields.io/badge/边框效果-pink)](https://github.com/chokcoco/iCSS/labels/边框效果)\r\n\r\n[![SVG](https://img.shields.io/badge/SVG-lime)](https://github.com/chokcoco/iCSS/labels/SVG) [![奇技淫巧](https://img.shields.io/badge/奇技淫巧-palegreen)](https://github.com/chokcoco/iCSS/labels/奇技淫巧)  [![性能](https://img.shields.io/badge/性能-peru)](https://github.com/chokcoco/iCSS/labels/性能) [![技巧](https://img.shields.io/badge/技巧-purple)](https://github.com/chokcoco/iCSS/labels/技巧)  [![浏览器特性](https://img.shields.io/badge/浏览器特性-rosybrown)](https://github.com/chokcoco/iCSS/labels/浏览器特性)  [![特殊交互](https://img.shields.io/badge/特殊交互-sienna)](https://github.com/chokcoco/iCSS/labels/特殊交互) [![用户体验](https://img.shields.io/badge/用户体验-skyblue)](https://github.com/chokcoco/iCSS/labels/用户体验) [![翻译](https://img.shields.io/badge/翻译-tan)](https://github.com/chokcoco/iCSS/labels/翻译) [![设计](https://img.shields.io/badge/设计-yellowgreen)](https://github.com/chokcoco/iCSS/labels/设计) [![面试](https://img.shields.io/badge/面试-tomato)](https://github.com/chokcoco/iCSS/labels/面试) [![Bug](https://img.shields.io/badge/Bug-green)](https://github.com/chokcoco/iCSS/labels/Bug)\r\n\r\n## iCSS 前端趣闻\r\n\r\n所有内容首发更新到我的**公众号**，以及 iCSS 有高质量**微信群聊**，感兴趣不要错过：\r\n\r\n\u003cimg width=160 src=\"https://raw.githubusercontent.com/chokcoco/chokcoco/main/qrcode_big.png\" /\u003e\r\n\r\n## LIST\r\n\r\n#### 217、[【动画进阶】单标签实现多行文本随滚动颜色变换](https://github.com/chokcoco/iCSS/issues/269)\r\n\r\n![](https://github.com/user-attachments/assets/784fbce5-0e77-4365-acb2-3e008a7c4e96)\r\n\r\n#### 216、[【现代 CSS】更强大的 :nth-child 选择器](https://github.com/chokcoco/iCSS/issues/267)\r\n\r\n#### 215、[全尺寸的带圆角的渐变边框](https://github.com/chokcoco/iCSS/issues/266)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/aa45cff6-d6b0-4c80-9289-04eac2110075)\r\n\r\n#### 214、[巧妙使用多种方式实现单侧阴影](https://github.com/chokcoco/iCSS/issues/265)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/fe6e93e4-578d-491e-83d7-883c142bbd2d)\r\n\r\n#### 213、[渐变边框文字效果？CSS 轻松拿捏！](https://github.com/chokcoco/iCSS/issues/264)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/fc584688-1848-4f91-ba16-c40db24c5598)\r\n\r\n#### 212、[【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究](https://github.com/chokcoco/iCSS/issues/263)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/92d47216-b270-4f27-babb-fb37d6e7e905)\r\n\r\n#### 211、[【动画进阶】类 ChatGpt 多行文本打字效果](https://github.com/chokcoco/iCSS/issues/262)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/2a2f26ae-a4bc-4139-a108-3067f31c1c52)\r\n\r\n#### 210、[【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width](https://github.com/chokcoco/iCSS/issues/259)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/442f06e2-b525-42a0-b92a-74d3543ba5b9)\r\n\r\n#### 209、[【动画进阶】极具创意的鼠标交互动画](https://github.com/chokcoco/iCSS/issues/258)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/438e0d44-1f4b-44c0-96cc-4724eb632135)\r\n\r\n#### 208、[【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画](https://github.com/chokcoco/iCSS/issues/257)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/b3d46456-7c07-4e17-9b23-97c428aca10c)\r\n\r\n#### 207、[【布局进阶】巧用 :has \u0026 drop-shadow 实现复杂布局效果](https://github.com/chokcoco/iCSS/issues/256)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/480a0e78-9a19-4587-a46e-0d3fcf84b0d4)\r\n\r\n#### 206、[现代 CSS 解决方案：accent-color 强调色](https://github.com/chokcoco/iCSS/issues/255)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/605cd0e3-f9a3-4f47-b416-1a1cc2683a06)\r\n\r\n#### 205、[【动画进阶】神奇的 3D 卡片反光闪烁动效](https://github.com/chokcoco/iCSS/issues/254)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/d4a79fd3-c5a0-4757-9c1f-d801bedf9a66)\r\n\r\n#### 204、[现代 CSS 解决方案：文字颜色自动适配背景色！](https://github.com/chokcoco/iCSS/issues/253)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/72b9f222-8a73-4d49-966f-db61bd59eed8)\r\n\r\n#### 203、[带圆角的虚线边框？CSS 不在话下](https://github.com/chokcoco/iCSS/issues/250)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/94750b76-b565-42cb-b261-bc3ed0447f09)\r\n\r\n#### 202、[【布局技巧】Flex 布局下居中溢出滚动截断问题](https://github.com/chokcoco/iCSS/issues/249)\r\n\r\n![288605244-2228ef21-e75c-4d5c-ae31-c472bf20e947](https://github.com/chokcoco/iCSS/assets/8554143/eabca028-5225-4b58-8e57-1e3a2dc32710)\r\n\r\n#### 201、[CSS 也能实现 if 判断？实现动态高度下的不同样式展现](https://github.com/chokcoco/iCSS/issues/248)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/9ef933f9-6f2f-4333-a11a-a979d349e53f)\r\n\r\n#### 200、[【动画进阶】单标签下多色块随机文字随机颜色动画](https://github.com/chokcoco/iCSS/issues/247)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/e4136dc7-159d-4662-bf39-97c99ae6ea48)\r\n\r\n#### 199、[CSS 还原拉斯维加斯球数字动画](https://github.com/chokcoco/iCSS/issues/246)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/274851330-29a8ffd1-e412-49a5-99f4-297eccf907ed.gif)\r\n\r\n#### 198、[【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原 ](https://github.com/chokcoco/iCSS/issues/245)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/273544952-d8b83606-4925-4721-a1d4-81c9fed7382f.gif)\r\n\r\n#### 197、[【动画进阶】当路径动画遇到滚动驱动！](https://github.com/chokcoco/iCSS/issues/244)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/266767709-654010fc-84bf-4684-95c7-046ef9c5a60a.gif)\r\n\r\n#### 196、[现代 CSS 解决方案：原生嵌套（Nesting）](https://github.com/chokcoco/iCSS/issues/243)\r\n\r\n#### 195、[现代 CSS 解决方案：数学函数 Round](https://github.com/chokcoco/iCSS/issues/242)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/264971324-c10e3935-2a30-4aed-81dd-0102ad6dc422.gif)\r\n\r\n#### 194、[震惊！CSS 也能实现碰撞检测？](https://github.com/chokcoco/iCSS/issues/241)\r\n\r\n![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f46ba2d04d7c4a9d8ec5ad28a2d997e2~tplv-k3u1fbpfcp-watermark.image?)\r\n\r\n#### 193、[抢先体验！超强的 Anchor Positioning 锚点定位](https://github.com/chokcoco/iCSS/issues/239)\r\n\r\n![](https://img2023.cnblogs.com/blog/608782/202308/608782-20230814230910889-551932555.gif)\r\n\r\n#### 192、[神奇的 3D 磨砂玻璃透视效果](https://github.com/chokcoco/iCSS/issues/238)\r\n\r\n![258775149-4247cd7b-7b36-43d7-9231-f1490e0c442b](https://github.com/chokcoco/iCSS/assets/8554143/fe1faa52-00b5-4514-991d-7259662251a8)\r\n\r\n#### 191、[【动画进阶】有意思的 Emoji 3D 表情切换效果](https://github.com/chokcoco/iCSS/issues/237)\r\n\r\n![](https://github.com/chokcoco/iCSS/assets/8554143/2f10097a-8049-40f7-941d-0332c82baefc)\r\n\r\n#### 190、[【动画进阶】有意思的网格下落渐次加载效果](https://github.com/chokcoco/iCSS/issues/235)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/252986059-7a3d5897-614b-4dde-95f1-eb666309fab9.gif)\r\n\r\n#### 189、[解放生产力！transform 支持单独赋值改变](https://github.com/chokcoco/iCSS/issues/236)\r\n\r\n#### 188、[单标签下的日间/黑夜模式切换按钮效果](https://github.com/chokcoco/iCSS/issues/234)\r\n\r\n![](https://github.com/chokcoco/cococss/assets/8554143/045bbde5-55da-45da-b854-39dc95b85a8b)\r\n\r\n#### 187、[现代 CSS 解决方案：CSS 原生支持的三角函数](https://github.com/chokcoco/iCSS/issues/233)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/240595711-ebfe3bb2-ac54-4c17-8604-5117b8562d6e.png)\r\n\r\n#### 186、[有意思的气泡 Loading 效果](https://github.com/chokcoco/iCSS/issues/231)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/231435406-d26ea832-9dc7-4cdf-80e6-4b392a08d859.gif)\r\n\r\n#### 185、[有趣的六芒星能力图动画](https://github.com/chokcoco/iCSS/issues/228)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/226392554-8f59f5ee-5cd2-4fc4-bdb8-71dab454cd07.gif)\r\n\r\n#### 184、[CSS 高阶小技巧 - 角向渐变的妙用！](https://github.com/chokcoco/iCSS/issues/227)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/225660319-9dc4c4f8-a624-4219-820d-44918fb75fe6.png)\r\n\r\n#### 183、[巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画](https://github.com/chokcoco/iCSS/issues/226)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/222392984-ee7caa2a-d8d9-43c2-ae4c-4bd2e8d50db1.gif)\r\n\r\n#### 182、[CSS 高阶技巧 -- 不定宽文本溢出跑马灯效果完美解决方案](https://github.com/chokcoco/iCSS/issues/225)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/219847245-baf51088-c7e5-450d-b277-06b8f2989443.gif)\r\n\r\n#### 181、[由小见大！不规则造型按钮解决方案](https://github.com/chokcoco/iCSS/issues/224)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/218682392-bbf4bace-e73d-4afa-9727-74ee3a79ac3a.png)\r\n\r\n#### 180、[动态视口单位之 dvh、svh、lvh](https://github.com/chokcoco/iCSS/issues/223)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/215314253-dbf5f970-d86c-4e17-aad7-ede5a43b7593.png)\r\n\r\n#### 179、[开局一张图，构建神奇的 CSS 效果](https://github.com/chokcoco/iCSS/issues/218)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/208087664-1cc7448f-4c4f-45d4-974e-b597ff5799f0.gif)\r\n\r\n#### 178、[巧用视觉障眼法，还原 3D 文字特效](https://github.com/chokcoco/iCSS/issues/219)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/208053417-07b4bfa5-eac3-4a34-af57-62ab8fc8f4ed.gif)\r\n\r\n#### 177、[不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图](https://github.com/chokcoco/iCSS/issues/215)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/206407140-0a7fc0da-c8bf-4f26-b15e-0cb07c29b963.gif)\r\n\r\n#### 176、[现代 CSS 高阶技巧，不规则边框解决方案](https://github.com/chokcoco/iCSS/issues/221)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/204084009-611b9415-dd6f-467e-96a4-c2c5373fab08.gif)\r\n\r\n#### 175、[现代 CSS 高阶技巧，完美的波浪进度条效果！](https://github.com/chokcoco/iCSS/issues/220)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/204078431-ee7cf2d3-3340-4713-a26e-51a6adbea76c.gif)\r\n\r\n#### 174、[现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！](https://github.com/chokcoco/iCSS/issues/217)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/203250544-89dcff90-8c3c-4bda-9e70-33a2e7d828a5.png)\r\n\r\n#### 173、[现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/iCSS/issues/214)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/202458010-a4b9c017-7112-40fa-affc-82dc3c3fce69.gif)\r\n\r\n#### 172、[除了 filter 还有什么置灰网站的方式？](https://github.com/chokcoco/iCSS/issues/212)\r\n![](https://user-images.githubusercontent.com/8554143/204998014-154d7877-0592-4601-99fb-3cd644e25cd3.gif)\r\n\r\n#### 171、[快速构建 3D Visualization of DOM](https://github.com/chokcoco/iCSS/issues/210)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/197375744-c35038f6-f498-492e-a065-02376471a78b.gif)\r\n\r\n#### 170、[CSS at-rules(@) 规则扫盲](https://github.com/chokcoco/iCSS/issues/204)\r\n\r\n#### 169、[CSS 渐变锯齿消失术](https://github.com/chokcoco/iCSS/issues/209)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/198038342-79e90db9-3347-43d7-a5e5-c8bfb4fb63af.gif)\r\n\r\n#### 168、[超强的苹果官网滚动文字特效实现](https://github.com/chokcoco/iCSS/issues/208)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/195977878-9833a3bf-4537-4ccf-9111-7d2be26c7b33.gif)\r\n\r\n#### 167、[超强的纯 CSS 鼠标点击拖拽效果](https://github.com/chokcoco/iCSS/issues/207)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/190998870-cca39d69-be96-4ae6-a245-52ee62cbd429.gif)\r\n\r\n#### 166、[两道超有意思的 CSS 面试题，试试你的基础](https://github.com/chokcoco/iCSS/issues/206)\r\n\r\n#### 165、[单标签实现复杂的棋盘布局](https://github.com/chokcoco/iCSS/issues/203)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/188442119-a443a5d4-e268-4e5b-8341-62ca614cda8d.png)\r\n\r\n#### 164、[新时代布局新特性 -- 容器查询](https://github.com/chokcoco/iCSS/issues/201)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/186677287-a1076390-f74c-4a2b-a8be-a385d4326057.gif)\r\n\r\n#### 163、[有意思的水平横向溢出滚动](https://github.com/chokcoco/iCSS/issues/200)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/185925720-d81fb5b5-5f7c-44a3-a23b-cae7cccc2d6d.gif)\r\n\r\n#### 162、[高阶 CSS 技巧在复杂动效中的应用](https://github.com/chokcoco/iCSS/issues/202)\r\n\r\n\u003cimg src=\"https://user-images.githubusercontent.com/8554143/187671481-5e075209-44d3-44a6-b540-4f457999ed74.gif\" width=\"600px\"/\u003e\r\n\r\n#### 161、[有意思的方向裁切 overflow: clip](https://github.com/chokcoco/iCSS/issues/199)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/184640231-ace474c7-2699-4b1e-b99f-b38cba26a2df.gif)\r\n\r\n#### 160、[巧用 transition 实现短视频 APP 点赞动画](https://github.com/chokcoco/iCSS/issues/198)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/183909772-acf0837c-1145-4078-8702-6b7f994328d7.gif)\r\n\r\n#### 159、[妙啊！纯 CSS 实现拼图游戏](https://github.com/chokcoco/iCSS/issues/197)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/182617117-4512bb74-d7eb-4a39-8e85-0a02cd52b9f5.gif)\r\n\r\n#### 158、[多行文本下的文字渐隐消失术](https://github.com/chokcoco/iCSS/issues/196)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/182107902-b8e414f1-4d30-442e-b1d2-29234b2b5323.gif)\r\n\r\n#### 157、[使用 CSS 构建强大且酷炫的粒子动画](https://github.com/chokcoco/iCSS/issues/195)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/179990358-5d13aa58-486c-4461-9e16-f04295110d35.gif)\r\n\r\n#### 156、[妙用 CSS 构建花式透视背景效果](https://github.com/chokcoco/iCSS/issues/194)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/179509709-e60ac03f-5db6-41e7-ace7-2ac07f031777.gif)\r\n\r\n#### 155、[圆角大杀器，使用滤镜构建圆角及波浪效果！](https://github.com/chokcoco/iCSS/issues/192)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/178275342-c4dffa35-a886-41be-aa1c-9c0f19468a9e.gif)\r\n\r\n#### 154、[超酷炫的转场动画？CSS 轻松拿下！](https://github.com/chokcoco/iCSS/issues/191)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/177775093-f25e0264-5e74-4516-9068-9a537344e865.gif)\r\n\r\n#### 153、[利用噪声构建美妙的 CSS 图形](https://github.com/chokcoco/iCSS/issues/190)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/177010428-12045a95-3030-4d4d-a3d0-203554af69c3.gif)\r\n\r\n#### 152、[高阶切图技巧！基于单张图片的任意颜色转换](https://github.com/chokcoco/iCSS/issues/189)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/175951163-e8175533-b6e7-4a26-b28d-b1a3bb195fb5.png)\r\n\r\n#### 151、[使用纯 CSS 实现超酷炫的粘性气泡效果](https://github.com/chokcoco/iCSS/issues/188)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/175025476-d27fca48-62af-462f-b030-af6c818e6055.gif)\r\n\r\n#### 150、[超 Nice 的表格响应式布局小技巧](https://github.com/chokcoco/iCSS/issues/187)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/174429173-b2b8352c-1b9a-40d0-a69e-15ceb7b1636f.gif)\r\n\r\n#### 149、[有意思的鼠标指针交互探究](https://github.com/chokcoco/iCSS/issues/186)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/173178051-22618d6a-cdb9-4d8f-ac65-f895ae4e0c0b.gif)\r\n\r\n#### 148、[使用 content-visibility 优化渲染性能](https://github.com/chokcoco/iCSS/issues/185)\r\n\r\n#### 147、[文字轮播与图片轮播？CSS 不在话下](https://github.com/chokcoco/iCSS/issues/184)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/169821330-21625c8c-d9b4-4ef3-9b72-f55e1e45fbbe.gif)\r\n\r\n#### 146、[动画小技巧，通过 hover 让动画只运行一次且停留在最后一帧](https://github.com/chokcoco/iCSS/issues/182)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/167853146-3f842313-0cac-4f26-968f-1746fbda214f.gif)\r\n\r\n#### 145、[浅谈逻辑选择器 is、where、not、has](https://github.com/chokcoco/iCSS/issues/181)\r\n\r\n#### 144、[现代 CSS 解决方案：CSS 数学函数](https://github.com/chokcoco/iCSS/issues/177)\r\n\r\n#### 143、[离谱的 CSS！从表盘刻度到艺术剪纸](https://github.com/chokcoco/iCSS/issues/180)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/164239137-ee2d9e90-66ac-42b3-8e66-1ce81a0b1a38.gif)\r\n\r\n#### 142、[让交互更加生动！有意思的鼠标跟随 3D 旋转动效](https://github.com/chokcoco/iCSS/issues/179)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/163177359-9b1941cd-93ec-478a-bba7-32ed34ca5945.gif)\r\n\r\n#### 141、[Amazing！巧用 CSS 视差实现酷炫交互动效](https://github.com/chokcoco/iCSS/issues/178)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/162746366-7d7bade9-a78d-4b18-b9af-aa79ec9f9e7e.gif)\r\n\r\n#### 140、[现代 CSS 解决方案：Modern CSS Reset](https://github.com/chokcoco/iCSS/issues/176)\r\n\r\n#### 139、[巧用 background-clip 实现超强的文字动效 ](https://github.com/chokcoco/iCSS/issues/175)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/160836908-aa36f16a-4895-41b0-91fd-5782b370579d.gif)\r\n\r\n#### 138、[一道有意思的 CSS 面试题，FizzBu​​zz ~](https://github.com/chokcoco/iCSS/issues/174)\r\n\r\n#### 137、[2022 年最受瞩目的新特性 CSS @layer 到底是个啥？](https://github.com/chokcoco/iCSS/issues/171)\r\n\r\n#### 136、[CSS 阴影进阶，实现更加的立体的阴影效果！](https://github.com/chokcoco/iCSS/issues/170)\r\n\r\n![](https://camo.githubusercontent.com/447042c5666f850c5a3f9a19426e64c7d72cca75d521265386aefe4e52fd81d0/68747470733a2f2f70392d6a75656a696e2e62797465696d672e636f6d2f746f732d636e2d692d6b3375316662706663702f39623138383132346638616434396630393461616135373838326135393439307e74706c762d6b3375316662706663702d77617465726d61726b2e696d6167653f)\r\n\r\n#### 135、[利用混合模式，让文字智能适配背景颜色](https://github.com/chokcoco/iCSS/issues/169)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/156753214-a6b1b6b7-b3fe-47b1-ab3e-601a2e98962e.gif)\r\n\r\n#### 134、[系统性学习 CSS 指南及全 DEMO 练习](https://github.com/chokcoco/iCSS/issues/168)\r\n\r\n#### 133、[巧用 CSS 构建渐变彩色二维码](https://github.com/chokcoco/iCSS/issues/167)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/155879216-ad6fc4e2-979a-4e52-8308-7f99ad8311de.png)\r\n\r\n#### 132、[来了来了，它终于来了，动画杀手锏 @scroll-timeline](https://github.com/chokcoco/iCSS/issues/166)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/155667488-a139c576-6abb-4001-bbf9-a6900cf09c75.gif)\r\n\r\n#### 131、[突破限制，CSS font-variation 可变字体的魅力](https://github.com/chokcoco/iCSS/issues/164)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/154795501-7ae58f37-df35-43ae-803c-16af9bad9d31.gif)\r\n\r\n#### 130、[小技巧 | 渐变消失遮罩的多种实现方式](https://github.com/chokcoco/iCSS/issues/163)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/154455188-ca43054a-c34d-4eb0-89ca-ee2a3881e796.png)\r\n\r\n#### 129、[巧用 CSS 实现炫彩三角边框动画](https://github.com/chokcoco/iCSS/issues/162)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/153760987-305539d2-1896-4717-9551-f054fd9ba6f1.gif)\r\n\r\n#### 128、[扫盲贴：2021 CSS 最冷门特性都是些啥？](https://github.com/chokcoco/iCSS/issues/161)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/153198755-aac1ca13-80c3-4459-9746-3a418a939dd6.png)\r\n\r\n#### 127、[疑难杂症：运用 transform 导致文本模糊的现象探究](https://github.com/chokcoco/iCSS/issues/160)\r\n\r\n#### 126、[LPL Ban/Pick 选人阶段的遮罩效果是如何实现的？](https://github.com/chokcoco/iCSS/issues/159)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/150136348-ea717988-9e1c-4503-b040-719dde193521.gif)\r\n\r\n#### 125、[巧用 CSS 实现动态线条 Loading 动画](https://github.com/chokcoco/iCSS/issues/158)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/149146680-b1d7f89b-2e6a-4787-85bd-c7d871564816.gif)\r\n\r\n#### 124、[深入浅出 CSS 动画](https://github.com/chokcoco/iCSS/issues/141)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/148633639-66ceea90-94ea-4e1e-9bfe-38d4917a2a51.gif)\r\n\r\n#### 123、[妙用滤镜构建高级感拉满的磨砂玻璃渐变背景](https://github.com/chokcoco/iCSS/issues/157)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/148382115-b8092fb6-1e17-46e7-a61d-6fa3cc838e7c.png)\r\n\r\n#### 122、[深入探讨 filter 与 backdrop-filter 的异同](https://github.com/chokcoco/iCSS/issues/147)\r\n\r\n#### 121、[Amazing！！CSS 也能实现烟雾效果？](https://github.com/chokcoco/iCSS/issues/156)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/147098212-8f74ce74-2069-4d28-98ad-6cea0990bdfe.gif)\r\n\r\n#### 120、[Amazing！！CSS 也能实现极光？](https://github.com/chokcoco/iCSS/issues/155)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/146188628-c878bc0c-e48e-48fc-99fb-1fc593580df8.gif)\r\n\r\n#### 119、[神奇的滤镜！巧妙实现内凹的平滑圆角](https://github.com/chokcoco/iCSS/issues/154)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/144423491-3df2c65a-0440-44ba-ad91-9c995a340c90.png)\r\n\r\n#### 118、[利用 clip-path 实现动态区域裁剪](https://github.com/chokcoco/iCSS/issues/153)\r\n\r\n#### 117、[使用 CSS 轻松实现一些高频出现的奇形怪状按钮](https://github.com/chokcoco/iCSS/issues/152)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/142734383-ec0e4dfd-38b0-4eeb-a1ee-b4e17c9488b6.png)\r\n\r\n#### 116、[巧用渐变实现高级感拉满的背景光动画](https://github.com/chokcoco/iCSS/issues/150)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/141609598-e0a1e420-2967-4ce4-8086-bfef1233f5f6.gif)\r\n\r\n#### 115、[巧用滤镜实现高级感拉满的文字快闪切换效果](https://github.com/chokcoco/iCSS/issues/149)\r\n\r\n\u003cimg width=400 src=\"https://user-images.githubusercontent.com/8554143/140746534-93b02f03-7624-4d1a-b832-9269f7c4f848.gif\" /\u003e\r\n\r\n#### 114、[3D 穿梭效果？使用 CSS 轻松搞定](https://github.com/chokcoco/iCSS/issues/148)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/141036836-b82282d9-a869-4d33-b031-567a38aed965.gif)\r\n\r\n#### 113、[仅仅使用 HTML/CSS 实现进度条的 N 种方式](https://github.com/chokcoco/iCSS/issues/146)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/130446725-8dc02d0e-8fc7-43b1-995c-a26f25392c0c.gif)\r\n\r\n#### 112、[CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框](https://github.com/chokcoco/iCSS/issues/145)\r\n\r\n#### 111、[利用 CSS Overview 面板重构优化你的网站](https://github.com/chokcoco/iCSS/issues/144)\r\n\r\n#### 110、[小技巧 | 一行代码实现头像与国旗的融合](https://github.com/chokcoco/iCSS/issues/143)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/135429916-18314111-bd24-406e-bc2c-9441040d0eec.png)\r\n\r\n#### 109、[CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果](https://github.com/chokcoco/iCSS/issues/142)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/135230872-8968c011-c078-43b7-9ae2-58e2a259824f.gif)\r\n\r\n#### 108、[CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果](https://github.com/chokcoco/iCSS/issues/140)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/134371611-a1b539b7-f0c5-4755-9312-b09ada72163f.gif)\r\n\r\n#### 107、[妙用 background 实现花式文字效果](https://github.com/chokcoco/iCSS/issues/138)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/132971163-84763256-220a-403c-bdfe-9b308996b950.gif)\r\n\r\n#### 106、[实现一个会动的鸿蒙 LOGO](https://github.com/chokcoco/iCSS/issues/137)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/132118280-7119c524-4b5c-4b9d-b851-aec507dd2ab4.gif)\r\n\r\n#### 105、[巧用模糊实现文字的 3D 效果](https://github.com/chokcoco/iCSS/issues/135)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/131250682-eba2d0eb-897b-4536-b728-7b5828828761.gif)\r\n\r\n#### 104、[奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？](https://github.com/chokcoco/iCSS/issues/132)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/130325052-c98c7552-c4eb-496d-84bc-6dd1c6f887e0.gif)\r\n\r\n#### 103、[CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能](https://github.com/chokcoco/iCSS/issues/133)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/129591093-4d5255a1-f0b5-4983-8c7a-8ec919df6e66.gif)\r\n\r\n#### 102、[CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？](https://github.com/chokcoco/iCSS/issues/130)\r\n\r\n#### 101、[【Web动画】科技感十足的暗黑字符雨动画](https://github.com/chokcoco/iCSS/issues/129)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/127498604-2dc65906-b730-4e8f-b5f5-e10160007024.gif)\r\n\r\n#### 100、[CSS 世界中的方位与顺序](https://github.com/chokcoco/iCSS/issues/127)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/126026009-5d8c6c3f-d8dc-48c6-9943-9158ab0edf80.png)\r\n\r\n#### 99、[巧妙的实现带圆角的三角形](https://github.com/chokcoco/iCSS/issues/126)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/124783460-ab1f7580-df77-11eb-920d-3b9707130c90.png)\r\n\r\n#### 98、[CSS 奇思妙想 | 全兼容的毛玻璃效果](https://github.com/chokcoco/iCSS/issues/124)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/123645631-14f19e00-d859-11eb-9aaa-3b0032da89e0.gif)\r\n\r\n#### 97、[试试酷炫的 3D 视角](https://github.com/chokcoco/iCSS/issues/122)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/122393058-0f699d80-cfa7-11eb-98f8-53529b826e8b.gif)\r\n\r\n#### 96、[Web 动画原则及技巧浅析](https://github.com/chokcoco/iCSS/issues/121)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/121014822-fdc90e80-c7cc-11eb-93c1-e9940d6f8a4e.gif)\r\n\r\n#### 95、[CSS ::marker 让文字序号更有意思](https://github.com/chokcoco/iCSS/issues/119)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/118149756-70500400-b444-11eb-9dd8-4a0c113ea2f9.gif)\r\n\r\n#### 94、[Single Div 绘图技巧](https://github.com/chokcoco/iCSS/issues/120)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/120091257-091c9a00-c13c-11eb-93e1-d15301eae96e.png)\r\n\r\n#### 93、[新时代创意布局不完全指南](https://github.com/chokcoco/iCSS/issues/70)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/111740149-34267a00-88bf-11eb-8275-efc28a9b958b.png)\r\n\r\n#### 92、[有意思的 ::maker 伪元素](https://github.com/chokcoco/iCSS/issues/119)\r\n\r\n#### 91、[使用 CSS prefers-* 规范，提升网站的可访问性与健壮性](https://github.com/chokcoco/iCSS/issues/118)\r\n\r\n#### 90、[小技巧！CSS 提取图片主题色功能探索](https://github.com/chokcoco/iCSS/issues/114)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/116404188-fb37d880-a860-11eb-8ca4-c1ad469b8b34.png)\r\n\r\n#### 89、[一种巧妙的使用 CSS 制作波浪效果的思路](https://github.com/chokcoco/iCSS/issues/112)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/118101873-a96b8280-b40a-11eb-95be-6c57b3ccaad4.gif)\r\n\r\n#### 88、[探秘神奇的曲线动画 `motion-path`](https://github.com/chokcoco/iCSS/issues/113)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/116109914-d10edb00-a6e7-11eb-80e7-b261458fd4e8.gif)\r\n\r\n#### 87、[新时代布局中一些有意思的特性](https://github.com/chokcoco/iCSS/issues/111)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/115135561-019da780-a04c-11eb-8ca3-77411aa77d75.png)\r\n\r\n#### 86、[CSS 还能这样玩？奇思妙想渐变的艺术](https://github.com/chokcoco/iCSS/issues/110)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/115102289-88834f00-9f7c-11eb-9555-045376314b59.gif)\r\n\r\n#### 85、[CSS @property，让不可能变可能](https://github.com/chokcoco/iCSS/issues/109) \r\n\r\n![](https://user-images.githubusercontent.com/8554143/114727332-b5631680-9d70-11eb-9515-3e509688ef07.gif)\r\n\r\n#### 84、[CSS 文字装饰 text-decoration \u0026 text-emphasis](https://github.com/chokcoco/iCSS/issues/103)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/113866131-846a6b00-97df-11eb-90ae-32d29671dfaa.png)\r\n\r\n#### 83、[老生常谈之 CSS 实现三角形](https://github.com/chokcoco/iCSS/issues/108)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/113475759-143faa80-94aa-11eb-8a20-bcd1d50691cb.png)\r\n\r\n#### 82、[巧用 SVG 滤镜制作有意思动效](https://github.com/chokcoco/iCSS/issues/107)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/112725701-8c5f1b00-8f54-11eb-96e7-ad5a5b83b9f3.gif)\r\n\r\n#### 81、[有意思！不规则边框的生成方案](https://github.com/chokcoco/iCSS/issues/106) \r\n\r\n![](https://user-images.githubusercontent.com/8554143/112712156-922f0f00-8f08-11eb-9f39-068799539d83.png)\r\n\r\n#### 80、[小技巧！CSS 整块文本溢出省略特性探究](https://github.com/chokcoco/iCSS/issues/102)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/110193533-5fe14300-7e6f-11eb-817b-076dae1b174f.png)\r\n\r\n#### 79、[奇思妙想 CSS 文字动画](https://github.com/chokcoco/iCSS/issues/101)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/109828417-948aaa00-7c77-11eb-876f-d2cd863b74ac.gif)\r\n\r\n#### 78、[巧用 `-webkit-box-reflect` 倒影实现各类动效](https://github.com/chokcoco/iCSS/issues/100)\r\n![](https://user-images.githubusercontent.com/8554143/108523825-530a0e80-7309-11eb-84e4-dad148e2c731.gif)\r\n\r\n#### 77、[使用 mask 实现视频弹幕人物遮罩过滤](https://github.com/chokcoco/iCSS/issues/98)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/107122321-0ddde980-68d2-11eb-8457-b3ad6c760c98.gif)\r\n\r\n#### 76、[你可能不知道的 transition 技巧与细节](https://github.com/chokcoco/iCSS/issues/96)\r\n![](https://user-images.githubusercontent.com/8554143/106390351-05456900-6423-11eb-9800-6ffd1d3eeef6.gif)\r\n\r\n#### 75、[CSS奇思妙想 -- 使用 CSS 创造艺术图案](https://github.com/chokcoco/iCSS/issues/94)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/105871313-23caef00-6034-11eb-8ad9-4133502103f7.png)\r\n\r\n#### 74、[生僻标签 fieldset 与 legend 的妙用](https://github.com/chokcoco/iCSS/issues/93)\r\n\r\n\u003cimg width=\"200\" src=\"https://user-images.githubusercontent.com/8554143/105197984-2c28b300-5b78-11eb-96e2-26213af4cd90.png\"\u003e\r\n\r\n#### 73、[CSS 奇思妙想边框动画](https://github.com/chokcoco/iCSS/issues/92)\r\n\r\n\u003cimg width=\"600\" src=\"https://user-images.githubusercontent.com/8554143/104848230-f9d04900-591e-11eb-8ecf-7915010f7bcd.gif\"\u003e\r\n\r\n#### 72、[CSS 技巧一则：动态高度过渡动画](https://github.com/chokcoco/iCSS/issues/91)\r\n\r\n#### 71、[如何不使用 `overflow: hidden` 实现 `overflow: hidden`？](https://github.com/chokcoco/iCSS/issues/90)\r\n\r\n#### 70、[水平垂直居中深入挖掘](https://github.com/chokcoco/iCSS/issues/89)\r\n\r\n#### 69、[一行 CSS 代码的魅力](https://github.com/chokcoco/iCSS/issues/87)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/103553627-ad314a80-4ee8-11eb-8093-7599116319ad.gif)\r\n\r\n#### 68、[使用纯 CSS 实现滚动阴影效果](https://github.com/chokcoco/iCSS/issues/86)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/103438190-671b8300-4c6b-11eb-957f-f7557dc83619.gif)\r\n\r\n#### 67、[探究 position-sticky 失效问题](https://github.com/chokcoco/iCSS/issues/85)\r\n\r\n#### 66、[CSS 艺术 -- 使用 background 创造各种美妙的背景](https://github.com/chokcoco/iCSS/issues/84)\r\n\r\n![bg9](https://user-images.githubusercontent.com/8554143/100546640-6030d780-329d-11eb-83f8-457090c76bae.gif)\r\n\r\n#### 65、[使用 tabindex 配合 focus-within 巧妙实现父选择器](https://github.com/chokcoco/iCSS/issues/83)\r\n\r\n#### 64、[CSS 技巧一则 -- 不定宽溢出文本适配滚动](https://github.com/chokcoco/iCSS/issues/81)\r\n\r\n![textscroll](https://user-images.githubusercontent.com/8554143/88412686-871d5f80-ce0c-11ea-9649-becdae112f30.gif)\r\n\r\n#### 63、[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/86525662-ab94b480-bebc-11ea-9824-b4f6e0536da7.gif)\r\n\r\n#### 62、[使用 display: contents 增强页面语义](https://github.com/chokcoco/iCSS/issues/79)\r\n\r\n#### 61、[CSS 故障艺术](https://github.com/chokcoco/iCSS/issues/78)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/73518406-2acb1b80-4439-11ea-84c3-c83e51601bac.gif)\r\n\r\n#### 60、[巧妙实现带圆角的渐变边框](https://github.com/chokcoco/iCSS/issues/77) \r\n\r\n![](https://user-images.githubusercontent.com/8554143/73247942-f4995c00-41ec-11ea-97d3-17250b0f0378.gif)\r\n\r\n#### 59、[深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）](https://github.com/chokcoco/iCSS/issues/76)\r\n\r\n#### 58、[巧用 CSS 实现酷炫的充电动画](https://github.com/chokcoco/iCSS/issues/75)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/71305432-e9ddf100-240e-11ea-81a9-b64bc3db8c21.gif)\r\n\r\n#### 57、[使用 sroll-snap-type 优化滚动](https://github.com/chokcoco/iCSS/issues/74)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/70142474-471a3880-16d4-11ea-8d0b-b6623049d376.gif)\r\n\r\n#### 56、[在 CSS 中使用三角函数绘制曲线图形及展示动画](https://github.com/chokcoco/iCSS/issues/72)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/69351842-e5f76b80-0cb6-11ea-8c3c-b6eee35dff01.gif)\r\n\r\n#### 55、[CSS 阴影动画优化技巧一则](https://github.com/chokcoco/iCSS/issues/71)\r\n\r\n#### 54、[Web 字体 font-family 再探秘](https://github.com/chokcoco/iCSS/issues/69)\r\n\r\n#### 53、[你所不知道的 CSS 负值技巧与细节](https://github.com/chokcoco/iCSS/issues/68)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/62633633-0a794300-b967-11e9-8cca-c5f0e1087915.gif)\r\n\r\n#### 52、[A Guide to CSS Rules](https://github.com/chokcoco/iCSS/issues/67)\r\n\r\n#### 51、[CSS 属性选择器的深入挖掘](https://github.com/chokcoco/iCSS/issues/65)\r\n\r\n#### 50、[探秘 flex 上下文中神奇的自动 margin](https://github.com/chokcoco/iCSS/issues/64)\r\n\r\n#### 49、[巧妙使用 CSS 控制动画行进](https://github.com/chokcoco/iCSS/issues/63)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/55224859-422dec80-5209-11e9-9297-eba3bb834246.gif)\r\n\r\n#### 48、[CSS 火焰，不在话下](https://github.com/chokcoco/iCSS/issues/62)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/54913205-23b6b100-4eea-11e9-9b01-910b30840fb6.gif)\r\n\r\n#### 47、[不可思议的纯 CSS 实现鼠标跟随](https://github.com/chokcoco/iCSS/issues/46)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/53795509-1b172e80-3f6d-11e9-9836-4fc545e9094a.gif)\r\n\r\n#### 46、[有趣的 `box-decoration-break`](https://github.com/chokcoco/iCSS/issues/45)\r\n\r\n#### 45、[不可思议的纯 CSS 进度条效果](https://github.com/chokcoco/iCSS/issues/43)\r\n\r\n#### 44、[探究 CSS 混合模式\\滤镜导致 CSS 3D 失效问题](https://github.com/chokcoco/iCSS/issues/41)\r\n\r\n#### 43、[你所不知道的 CSS 阴影技巧与细节](https://github.com/chokcoco/iCSS/issues/39)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/48009747-415fc580-e157-11e8-8612-25dd32825551.png)\r\n\r\n#### 42、[滚动视差? CSS不在话下](https://github.com/chokcoco/iCSS/issues/37)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/43909161-3ff2bd1c-9c2c-11e8-932e-c21d0d031233.gif)\r\n\r\n#### 41、[神奇的选择器 `:focus-within`](https://github.com/chokcoco/iCSS/issues/36)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/43517148-48c40d10-95ba-11e8-9c42-61567daae18d.gif)\r\n\r\n#### 40、[Pure CSS Button Effect](//codepen.io/Chokcoco/pen/MGPwLg)\r\n\r\n#### 39、[妙用 scale 与 transfrom-origin，精准控制动画方向](https://github.com/chokcoco/iCSS/issues/34)\r\n\r\n#### 38、[不可思议的纯 CSS 导航栏下划线跟随效果](https://github.com/chokcoco/iCSS/issues/33)\r\n\r\n如何使用纯 CSS 制作下述下划线跟随效果？\r\n\r\n![underline](https://user-images.githubusercontent.com/8554143/37917279-8f6fd236-3150-11e8-8b8d-fca96d1d6001.gif)\r\n\r\n#### 37、[两行 CSS 代码实现图片任意颜色赋色技术](https://github.com/chokcoco/iCSS/issues/32)\r\n\r\n#### 36、[`text-fill-color` 与 `color` 的异同](https://github.com/chokcoco/iCSS/issues/17)\r\n\r\n#### 35、[你所不知道的 CSS 滤镜技巧与细节](https://github.com/chokcoco/iCSS/issues/30)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/30364781-3997cd10-9898-11e7-8c25-c54c6b6db705.gif)\r\n\r\n#### 34、[你所不知道的 CSS 动画技巧与细节](https://github.com/chokcoco/iCSS/issues/27)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/29759170-ca7c7768-8beb-11e7-8f8b-981c4e69f36c.gif)\r\n\r\n#### 33、[fixed 定位失效 || 不受控制的 `position:fixed`](https://github.com/chokcoco/iCSS/issues/24)\r\n\r\n#### 32、[CSS 新特性`contain`，控制页面的重绘与重排](https://github.com/chokcoco/iCSS/issues/23)\r\n\r\n#### 31、[纯 CSS 实现波浪效果!](https://github.com/chokcoco/iCSS/issues/22)\r\n\r\n![CSSWaVe](https://user-images.githubusercontent.com/8554143/28265378-f9bf3f82-6b21-11e7-83eb-e240b40b550a.gif)\r\n\r\n#### 30、[奇妙的 CSS shapes（CSS图形）](https://github.com/chokcoco/iCSS/issues/18)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/27017159-f7fb0fe4-4f58-11e7-8397-a467cc9662ab.gif)\r\n\r\n#### 29、[不可思议的混合模式 `background-blend-mode`](https://github.com/chokcoco/iCSS/issues/31)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/34141560-07988702-e4bd-11e7-96bc-e3ae8e931230.gif)\r\n\r\n#### 28、[不可思议的混合模式 `mix-blend-mode` ](https://github.com/chokcoco/iCSS/issues/16)\r\n\r\n![](https://cloud.githubusercontent.com/assets/8554143/25800098/7dccd4fe-341a-11e7-832c-f321e77ddac7.gif)\r\n\r\n#### 27、[神奇的 `conic-gradient` 角向渐变](https://github.com/chokcoco/iCSS/issues/19)\r\n\r\n![](https://user-images.githubusercontent.com/8554143/27471835-c0749fe6-582b-11e7-91eb-9be5ed6610f3.gif)\r\n\r\n#### 26、[奇妙的`-webkit-background-clip: text`](https://github.com/chokcoco/iCSS/issues/14)\r\n\r\n#### 25、[vh、vw、vmin、vmax 知多少](https://github.com/chokcoco/iCSS/issues/15)\r\n\r\n#### 24、[纯 CSS 实现瀑布流布局](https://github.com/chokcoco/iCSS/issues/40)\r\n\r\n#### 23、[谈谈 CSS 关键字 initial、inherit 和 unset](https://github.com/chokcoco/iCSS/issues/13)\r\n\r\n#### 22、[纯 CSS 方式实现 CSS 动画的暂停与播放](https://github.com/chokcoco/iCSS/issues/12)\r\n\r\n#### 21、[提高 CSS 动画性能的正确姿势 | 盒子端 CSS 动画性能提升研究](https://github.com/chokcoco/iCSS/issues/11)\r\n\r\n#### 20、[巧妙地制作背景色渐变动画！](https://github.com/chokcoco/iCSS/issues/10)\r\n\r\n如何实现下述的背景色渐变动画？\r\n\r\n![lineargradient](https://cloud.githubusercontent.com/assets/8554143/24186346/d984600a-0f12-11e7-8220-dc9a6c04b7ef.gif)\r\n\r\n#### 19、[深入探讨 CSS 特性检测 @supports 与 Modernizr](https://github.com/chokcoco/iCSS/issues/9)\r\n\r\n#### 18、[使用 `position:sticky` 实现粘性布局](https://github.com/chokcoco/iCSS/issues/8)\r\n\r\n![](https://cloud.githubusercontent.com/assets/8554143/22967003/97af8828-f39f-11e6-82db-55405160eea3.gif)\r\n\r\n#### 17、[再探究字体的渲染规则及 fallback 机制](https://github.com/chokcoco/iCSS/issues/7)\r\n\r\n#### 16、[你该知道的字体 `font-family`](https://github.com/chokcoco/iCSS/issues/6)\r\n\r\n#### 15、[`reset.css` 知多少 ](https://github.com/chokcoco/iCSS/issues/5)\r\n\r\n#### 14、[CSS命名方式是否有必要规范](https://github.com/chokcoco/iCSS/issues/59)\r\n\r\n#### 13、[引人瞩目的 CSS 自定义属性（CSS Variable）](https://github.com/chokcoco/iCSS/issues/58)\r\n\r\n#### 12、[结构性伪类选择器](https://github.com/chokcoco/iCSS/issues/57)\r\n\r\n#### 11、[IFC、BFC、GFC 与 FFC 知多少](https://github.com/chokcoco/iCSS/issues/56)\r\n\r\n#### 10、[巧妙的实现 CSS 斜线](https://github.com/chokcoco/iCSS/issues/2)\r\n\r\n使用单个标签，如何实现下图所示的斜线效果:\r\n\r\n![CSS slash](http://images2015.cnblogs.com/blog/608782/201611/608782-20161103132531986-482520887.png)\r\n\r\n#### 9、[巧妙的多列等高布局](https://github.com/chokcoco/iCSS/issues/55)\r\n\r\n规定下面的布局，实现多列等高布局，要求两列背景色等高。\r\n\r\n``` HTML\r\n\u003cdiv class=\"container\"\u003e\r\n    \u003cdiv class=\"left\"\u003e多列等高布局左\u003c/div\u003e \r\n    \u003cdiv class=\"right\"\u003e多列等高布局右\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n#### 8、[纯CSS的导航栏Tab切换方案](https://github.com/chokcoco/iCSS/issues/54)\r\n\r\n不用 `Javascript`，使用纯 `CSS` 方案，实现类似下图的导航栏 Tab 切换：\r\n\r\n![纯CSS的导航栏切换方案](https://user-images.githubusercontent.com/8554143/87443012-8aa03200-c627-11ea-9325-b1c39331263b.gif)\r\n\r\n#### 7、[全兼容的最后一条边界线问题](https://github.com/chokcoco/iCSS/issues/53)\r\n\r\n看看下图，常见于一些导航栏中，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷最优雅的实现？\r\n\r\n#### 6、[全兼容的多列均匀布局问题](https://github.com/chokcoco/iCSS/issues/52)\r\n\r\n如何实现下列这种多列均匀布局：\r\n\r\n![image](https://user-images.githubusercontent.com/8554143/87442550-03eb5500-c627-11ea-80f5-ada17a79a6d0.png)\r\n\r\n#### 5、[纯 CSS 实现单行居中显示文字，多行居左显示，最多两行超过用省略号结尾](https://github.com/chokcoco/iCSS/issues/50)\r\n\r\n![image](https://user-images.githubusercontent.com/8554143/97247656-0f136b00-183b-11eb-8d8f-fb27af99a04b.png)\r\n\r\n#### 4、[从倒影说起，谈谈 CSS 继承 inherit](https://github.com/chokcoco/iCSS/issues/49)\r\n\r\n#### 3、[层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？](https://github.com/chokcoco/iCSS/issues/48)\r\n\r\n#### 2、[类似下面这样的条纹边框，只使用一个标签，可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型：](https://github.com/chokcoco/iCSS/issues/1)\r\n\r\n![image](https://user-images.githubusercontent.com/8554143/97247472-b6dc6900-183a-11eb-8331-ed952e4c2a1c.png)\r\n\r\n#### 1、[下面这个左边竖条图形，只使用一个标签，可以有多少种实现方式：](https://github.com/chokcoco/iCSS/issues/51)\r\n\r\n![image](https://user-images.githubusercontent.com/8554143/87442343-c686c780-c626-11ea-871a-d95f3176f6a4.png)\r\n\r\n## Stargazers over time\r\n\r\n[![Stargazers over time](https://starchart.cc/chokcoco/iCSS.svg)](https://starchart.cc/chokcoco/iCSS)\r\n\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchokcoco%2Ficss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchokcoco%2Ficss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchokcoco%2Ficss/lists"}