10.8K ·GitHub
这是什么？
一个精选的纯 CSS 演示与视觉效果合集，按分类（布局、阴影、渐变、滤镜、混合模式、3D、动画、clip-path、SVG）整理，方便你浏览寻找灵感，或学习某项具体的 CSS 技巧。
一个精选的纯 CSS 演示与视觉效果合集，按分类（布局、阴影、渐变、滤镜、混合模式、3D、动画、clip-path、SVG）整理，方便你浏览寻找灵感，或学习某项具体的 CSS 技巧。这是一个需要安装的库，还是只是可以浏览的合集？它不是库或软件包——而是一个按主题分组的独立 CSS 演示和代码片段画廊，供人查看和复制，而不是导入到项目里。
它不是库或软件包——而是一个按主题分组的独立 CSS 演示和代码片段画廊，供人查看和复制，而不是导入到项目里。怎么查看这些示例？每个条目都链接到一个在线预览页面，效果会实时运行，代码也可以查看；当主链接出现证书问题时，可以用提供的 GitHub Pages 镜像作为备用。
每个条目都链接到一个在线预览页面，效果会实时运行，代码也可以查看；当主链接出现证书问题时，可以用提供的 GitHub Pages 镜像作为备用。这些效果需要 JavaScript 吗，还是纯 CSS？大多数效果都用纯 CSS 实现，借助 hover、checked、target 等伪类技巧在没有 JS 的情况下模拟交互；少数条目依赖 CSS-Doodle——一个用于生成式图案的自定义元素工具。
大多数效果都用纯 CSS 实现，借助 hover、checked、target 等伪类技巧在没有 JS 的情况下模拟交互；少数条目依赖 CSS-Doodle——一个用于生成式图案的自定义元素工具。这个合集对谁有用？它面向想要高级 CSS 技巧（阴影、渐变、3D 变换、混合模式）参考示例的前端开发者和设计师，而不是现成的组件库。
它面向想要高级 CSS 技巧（阴影、渐变、3D 变换、混合模式）参考示例的前端开发者和设计师，而不是现成的组件库。部分条目中提到的 CSS-Doodle 是什么？CSS-Doodle 是一个自定义 HTML 元素/工具，多个演示用它仅凭 CSS 生成艺术风格的图案和背景。
CSS-Doodle 是一个自定义 HTML 元素/工具，多个演示用它仅凭 CSS 生成艺术风格的图案和背景。为什么同一个 Logo（比如 TikTok/抖音 Logo）有多个演示？作者有意展示了多种不同的技巧（box-shadow、mix-blend-mode 等），每种都能做出相同的视觉效果，以便并排对比不同的 CSS 特性。
作者有意展示了多种不同的技巧（box-shadow、mix-blend-mode 等），每种都能做出相同的视觉效果，以便并排对比不同的 CSS 特性。它也包含 SVG 技巧吗，还是只有纯 CSS？有，专门的 SVG 部分涵盖 feTurbulence 滤镜、结合 CSS drop-shadow 和模糊效果的 SVG 悬停线条动画等内容。
有，专门的 SVG 部分涵盖 feTurbulence 滤镜、结合 CSS drop-shadow 和模糊效果的 SVG 悬停线条动画等内容。What are similar projects?iCSS, galaxy, animate.css, Skills, mg-styles-15, flag-icons, design-resources-for-developers, frontend-dev-bookmarks
iCSS, galaxy, animate.css, Skills, mg-styles-15, flag-icons, design-resources-for-developers, frontend-dev-bookmarks