css特效表 • ゆめこ

还有渐变类的，比如径向，动感光波扩散。

特效名称 (Effect Name)	中文名称	描述 (Description)
Glow Effects	发光效果	通过 box-shadow 或 filter: drop-shadow() 创建元素周围的发光效果，常用于按钮或卡片的高亮。
Glitch Effect	故障效果	使用 @keyframes 动画结合 transform 和 clip-path，模拟数字故障或抖动效果，常用于文字或图像。
Hover Effects	悬停效果	通过 :hover 伪类改变颜色、缩放 (scale) 或透明度 (opacity)，增强交互体验。
Parallax Scrolling	视差滚动	使用 background-attachment: fixed 或 transform 创建背景与前景不同步的滚动效果，增加深度感。
Glassmorphism	玻璃拟态	结合 backdrop-filter: blur() 和透明背景，营造磨砂玻璃效果，常用于 UI 卡片设计。
Neon Glow	霓虹发光	使用多层 text-shadow 或 box-shadow 模拟霓虹灯效果，适合暗色主题的文字或边框。
3D Transform	3D 变换	通过 transform: rotateX/Y/Z 和 perspective 创建立体翻转或旋转效果，常用于卡片翻转。
Gradient Animation	渐变动画	使用 background: linear-gradient 结合 @keyframes 实现流动或呼吸式渐变色效果。
Text Typing Effect	打字效果	通过 animation 和 steps() 控制文字逐字显示，模拟打字机效果。
Ripple Effect	涟漪效果	使用 ::after 或 radial-gradient 在点击时生成扩散的圆形涟漪，常用于按钮。
Blur Effect	模糊效果	通过 filter: blur() 实现元素或背景的模糊，常用于动态聚焦或背景处理。
Morphing Shapes	形状变换	使用 transition 和 border-radius 或 clip-path 实现形状平滑过渡，如圆形变方形。
Infinite Scroll Animation	无限滚动动画	通过 translate 和 @keyframes 创建无缝循环的滚动效果，如跑马灯或图片轮播。
Pulse Effect	脉冲效果	使用 scale 和 opacity 的动画，营造元素周期性放大缩小的呼吸感。
Skew Effect	倾斜效果	通过 transform: skew() 使元素倾斜，常用于动态布局或装饰性设计。
Particle Effects	粒子效果	结合 ::before、::after 和随机动画，模拟粒子散射或烟花效果（需少量 JS 辅助）。
Water Wave Effect	水波效果	使用 filter: wave 或 clip-path 结合动画，模拟水面波纹，常用于背景。
Sticky Effects	粘性效果	通过 position: sticky 和 transition 实现元素在滚动时的平滑吸附效果。
Flip Effect	翻转效果	使用 transform: rotateY(180deg) 创建卡片或图像的翻转动画，常用于交互式展示。
Color Shift	颜色切换	通过 filter: hue-rotate() 或渐变动画实现颜色循环变化，增加视觉吸引力。

备注：

实现方式：大多数特效依赖 CSS 属性（如 transition、animation、filter、transform）和伪类/伪元素。复杂效果（如粒子效果）可能需要 JavaScript 辅助生成动态内容。
浏览器兼容性：现代浏览器普遍支持上述特效，但部分属性（如 backdrop-filter）在旧版浏览器可能需要前缀或降级处理。建议检查兼容性。
性能优化：避免过多使用 filter 或复杂动画以减少性能开销，特别是在移动设备上。
扩展性：通过结合 CSS 变量（—custom-property）和媒体查询（@media），可实现响应式和动态调整的特效。