前端 Wiki 出品的 100 个纯 CSS 特效：无需任何 JavaScript，按「按钮、文字、卡片、背景、加载、入场与交互动画」六大类筛选浏览。列表页缩略图即为实时渲染的特效演示，点击卡片进入详情页查看完整代码、复制使用。
悬停时按钮上浮加深阴影，点击有按压反馈
查看代码与演示 →深色底配荧光粉边框，多层发光营造赛博朋克感
查看代码与演示 →悬停时描边从左上角接力走一圈，笔画感十足
查看代码与演示 →按住按钮时水波从中心扩散淡出， Material 风格反馈
查看代码与演示 →按下时按钮回弹缩放，阴影同步收紧带来 Q 弹手感
查看代码与演示 →点击后左侧转圈、文字变「提交中」，禁用再次点击
查看代码与演示 →悬停时一道斜光从左扫到右，低调而有质感
查看代码与演示 →padding-box/border-box 双背景做出的渐变描边，悬停整体填充
查看代码与演示 →悬停时按钮放大微旋转，回弹缓动像捏了一块果冻
查看代码与演示 →悬停时原文字上移消失，新文字从底部滑入
查看代码与演示 →周围光圈持续呼吸扩散，适合引导用户点击的重要按钮
查看代码与演示 →锥形渐变边框持续旋转，按钮像被光环环绕
查看代码与演示 →悬停时纯色背景从底部填满，文字颜色同步反转
查看代码与演示 →多层偏移阴影堆出立体厚度，悬停时浮起更深
查看代码与演示 →悬停时描边光环向外扩散，聚焦且不抢眼
查看代码与演示 →彩色底上半透明磨砂按钮，悬停时材质更亮
查看代码与演示 →悬停时按钮绕 X 轴翻转到背面，像按下一个开关
查看代码与演示 →悬停时锥形进度环走满一圈，圆形按钮的进度表达
查看代码与演示 →文字填充三色渐变，背景裁剪到文字形状
查看代码与演示 →只有描边的描边字，悬停时填色变实心
查看代码与演示 →多层文字阴影堆出立体厚度，悬停上浮阴影拉长
查看代码与演示 →文字逐字出现，末尾光标持续闪烁
查看代码与演示 →每个字依次从下淡入，像被风逐字托起
查看代码与演示 →彩虹渐变在文字上持续流淌，循环无接缝
查看代码与演示 →红蓝错位抖动，赛博朋克风的故障美学
查看代码与演示 →荧光蓝多层发光，偶尔像坏灯管一样闪烁
查看代码与演示 →默认毛玻璃模糊，悬停后逐渐聚焦清晰
查看代码与演示 →悬停时每个字依次翻转 360 度，像翻牌一样
查看代码与演示 →悬停时字间距瞬间拉开，文字像被拉伸的橡皮筋
查看代码与演示 →悬停时彩色下划线从中间向两端画出
查看代码与演示 →每个字持续小弹跳，节奏轻快适合活力页面
查看代码与演示 →金色金属渐变加投影，质感厚重的高级感标题
查看代码与演示 →暖色多层阴影向上堆叠，火苗持续摇曳
查看代码与演示 →filter 色相 360 度循环，一个色值变出全套颜色
查看代码与演示 →文字像波浪一样上下起伏，颜色同步切换
查看代码与演示 →文字下方自带渐隐倒影，像放在水面上
查看代码与演示 →悬停时卡片绕 Y 轴翻转到背面，正面背面内容互不干扰
查看代码与演示 →悬停时卡片整体上浮，阴影加深，百搭的内容卡片动效
查看代码与演示 →backdrop-filter: blur 毛玻璃
彩色背景上的磨砂半透明卡片，高级感拉满
查看代码与演示 →一道斜光从卡片左侧扫过，低调奢华的悬停反馈
查看代码与演示 →conic-gradient + 旋转伪元素
锥形渐变描边持续旋转，像设备呼吸灯一样环绕卡片
查看代码与演示 →clip-path polygon 裁剪
四个角斜切，悬停时切角还原成直角，几何感十足
查看代码与演示 →border 三角形折角
右上角折起一角，悬停时折角变大，像被翻起的书页
查看代码与演示 →悬停时卡片 3D 后仰，像拿起来斜着看一样
查看代码与演示 →悬停后从底部滑出的信息
悬停时封面上移，底部信息条从下潜出
查看代码与演示 →悬停时内部画面放大加饱和，遮罩与标题淡入
查看代码与演示 →悬停其中一张时其他自动缩小退让，聚焦感强
查看代码与演示 →悬停时水面波纹从中心向外扩散，宁静而有活力
查看代码与演示 →无需 JavaScript，纯 CSS 的 max-height 过渡即可实现手风琴展开效果，收放自如。
悬停时自动展开隐藏内容，手风琴式的信息展示
查看代码与演示 →border-radius 八值写法做出水滴形卡片，圆角的新玩法
查看代码与演示 →多色渐变缓慢游走，零图片零 JS 的动态背景
查看代码与演示 →深空渐变上星点错落闪烁，一个元素就是一片星空
查看代码与演示 →横竖渐变交叉成网格，叠加光晕与缓速漂移的科技感背景
查看代码与演示 →几团模糊色斑在深空缓慢漂移融合，像极光在流动
查看代码与演示 →透明气泡从水底缓缓上升，适合水下主题页面
查看代码与演示 →绿色字符流从天而降，黑客帝国式的经典背景
查看代码与演示 →多团径向渐变互相推挤变形，类似 Mesh Gradient
查看代码与演示 →双色斜条向右持续流动，简洁百搭的动态纹理
查看代码与演示 →深色点阵整体呼吸闪烁，沉稳的科技纹理
查看代码与演示 →一团紫色光晕在暗中游走，适合做聚光氛围背景
查看代码与演示 →黑白棋盘格沿对角缓慢漂移，催眠系纹理
查看代码与演示 →SVG 噪点叠加在纯色上，消除渐变色带的高级做法
查看代码与演示 →中心太阳光芒四射缓慢旋转，温暖治愈系背景
查看代码与演示 →三层海浪前后起伏，水面永不重复
查看代码与演示 →正反双圈不同速旋转，最经典的加载等待方案
查看代码与演示 →灰色占位块配光泽划过，比空白和转圈体验都好
查看代码与演示 →条纹永不停歇的进度条，增长与流动双重视觉
查看代码与演示 →三个点依次起跳，轻量级等待指示器
查看代码与演示 →大小双圈反向旋转，带轨道感的加载组件
查看代码与演示 →五根彩条此起彼伏，像在播放音乐的均衡器
查看代码与演示 →中心红点持续向外放出涟漪，不急不缓的等待节奏
查看代码与演示 →3D 立方体连轴翻转，立体感最强的加载动画
查看代码与演示 →锥形渐变 + 蒙版做出的描边环，旋转无锯齿
查看代码与演示 →瓶内水面起伏上涨，适合百分比类加载场景
查看代码与演示 →"加载中"后面的点点点循环出现，极简文字加载
查看代码与演示 →点状边框模拟齿轮咬合，正反双齿同框旋转
查看代码与演示 →上下两个三角形拼成沙漏，定时翻转重置
查看代码与演示 →扫描线匀速旋转掠过目标点，科技风加载动画
查看代码与演示 →条目 1
条目 2 —— 滚动时淡入
条目 3 —— 滚动时淡入
条目 4 —— 滚动时淡入
内容滚动进入视口时自动从下淡入，现代浏览器原生方案
查看代码与演示 →滚动页面时背景相对内容不动，空间感拉满
查看代码与演示 →悬停列表项放大，其余项自动缩小退让
查看代码与演示 →悬停时持续左右抖动，csshake 的招牌效果
查看代码与演示 →悬停时像钟摆一样左右摇摆后归位
查看代码与演示 →悬停时缩放带旋转的连续弹跳，animate.style 的 tada
查看代码与演示 →悬停时像果冻一样左右挤压回弹
查看代码与演示 →等比放大两次再归位，永不停歇的心跳节奏
查看代码与演示 →悬停时高频微震，Hover.css 的 buzz 效果
查看代码与演示 →永续的上下浮动，像悬空漂浮的 UI 元素
查看代码与演示 →悬停时大幅平移摆动后回正，弹簧式余震
查看代码与演示 →元素绕 Y 轴从侧边翻转入场，悬停可重播
查看代码与演示 →从左侧带倾斜高速飞入，刹停后微回弹
查看代码与演示 →元素翻滚着从左侧滚入，自带喜感
查看代码与演示 →从反向旋转半圈并缩小着旋进入位
查看代码与演示 →从 30% 大小弹入到原尺寸，适用最广的入场动画
查看代码与演示 →从左侧滑入主视区，适合抽屉与通知条
查看代码与演示 →悬停上浮的同时阴影扩大变深，Hover.css 经典效果
查看代码与演示 →悬停时边框由内向外变粗，元素轻微收缩，Hover.css 的 trim
查看代码与演示 →多片竖板依次翻折，像百叶窗开合的切换效果
查看代码与演示 →从天而降并自旋半圈落定，magic.css 的 twister
查看代码与演示 →两块内容以缩放消隐的方式互换，magic.css 的 swap
查看代码与演示 →本合集大量效果改编自下面这些经典 CSS 站点（掘金《好玩的 CSS —— 40 个有趣的 CSS 网站》一文推荐清单），想深入钻研可逐一收藏。