css-effects 开源项目推荐（86 个）

IanLunn /Hover

一组由 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图片等。可轻松应用于你自己的元素、修改或仅用作灵感。提供 CSS、Sass 和 LESS 版本。

l-hammer /You-need-to-know-css

面向 Web 开发者的 CSS 技巧~

yesiamrocks /cssanimation

借助 {css}animation 释放动态 Web 体验。一个面向开发者和 UI 忍者的轻量级、零 JavaScript CSS 动画库。获取预构建效果、完全控制和快速现代的动态设计。

nikdelvin /liquid-glass

🫧 Pixel-perfect recreation of Apple's iOS 26 Liquid Glass effect using only CSS and SVG filters. Includes LiquidGlass containers, LiquidText, and LiquidButton components.

HuXn-WebDev /Advance-CSS-40-Projects

使用高级 CSS 构建惊艳动画/效果 💙

bedimcode /liquid-navigation-indicator

使用 HTML CSS 和 JavaScript 的液态导航菜单指示器

turkyden /image-hover

无需 JavaScript，你一直想要的图像悬停效果

yanglei1826877278 /liquid-glass

生成像 iOS 26 那样惊艳的液态玻璃效果。自定义 Apple 风格的模糊、透明度和光晕——立即复制 CSS 和 HTML。

aliajafari /Liquid-Glass-with-WebGL

使用 WebGL 的液态玻璃

longsizhuo /holocard

把任意图片变成分层、可交互的全息卡牌 · 把任意照片自动切成前中后景，每层各上各的箔面，渲染成可交互的全息闪卡

GANSGX /liquid-glass-css

极简的深色优先液态玻璃 CSS 套件（纯 CSS，无 JS）。

mrsidverse /CSS-Effects

HTML、CSS 和 JavaScript 技巧。

hongkiat /css3-glossy-effect

本演示展示如何结合 CSS3 渐变创建漂亮的光泽效果。

hongkiat /3d-button-flip

使用 CSS 的 3D 按钮翻转效果。

abuzar-alvi /Brainwave-Landing-Page

Brainwave——使用 React.js 和 Tailwind CSS 开发的现代 UI/UX 网站，体现了现代 UI/UX 原则。

mmrahmanbappi /100-css-designs

100 个免费 CSS 设计模板，附实时演示。包括玻璃拟态、新拟态、黏土拟态、液态玻璃、便当网格等。单个 HTML 文件，MIT 许可证。

0mppula /CS-GO_weapons

一个简单的 Web 应用，让用户使用游戏 "Counter-Strike: Global Offensive" 中选定的武器进行单发或多发射击。使用原生 JavaScript、HTML 和 CSS 创建。

hongkiat /css3-bounce-effect

本演示展示一个带有弹跳效果的通知栏，该效果通过 CSS3 动画实现。

wangruofeng /animation-playground

140+ 个纯 CSS / SVG / Canvas 网页动画特效合集 — 纯原生 Web 技术，浏览器本地实时运行，零重型依赖

Abdumajidov2005 /buxuz

使用 HTML 和 CSS 创建的网站