CSS 组件样式示例生成器
一些比较常用的CSS组件效果示例
尽量用电脑访问本页面
按钮样式示例
点击任意按钮以选中并调整样式
Loading 示例
多种常见 loading 效果
旋转
跳动
滑动
波浪
脉冲
圆圈
波纹
立方体
折叠
网格
卡片 / 风格
毛玻璃、拟态、普通卡片等
毛玻璃卡片
用于展示信息、统计等
拟态卡片
拟态风格的按钮或面板
提升卡片
通用内容展示卡片
渐变卡片
时尚的渐变背景卡片
动画边框卡片
动态边框效果
暗模式卡片
适合暗色主题的卡片
翻转卡片正面
悬浮翻转查看背面
翻转卡片背面
更多细节信息
阴影卡片
多层阴影效果
彩虹卡片
动态彩虹渐变
透明卡片
半透明效果
全息卡片
动态全息渐变
浮雕卡片
浮雕风格效果
波纹卡片
动态波纹效果
折纸卡片
折纸风格效果
气泡装饰 & 视觉背景
可用于 banner 或 hero 背景
清新气泡背景
清新气泡效果
渐变气泡背景
渐变背景上的气泡效果
霓虹气泡背景
暗色霓虹效果
波浪气泡背景
波浪动态效果
发光气泡背景
温暖发光效果
彩虹气泡背景
多彩渐变效果
脉冲气泡背景
脉冲动态效果
宇宙气泡背景
深邃宇宙效果
极光气泡背景
极光流动效果
星光气泡背景
闪烁星光效果
熔岩气泡背景
熔岩流动效果
云雾气泡背景
云雾缭绕效果
切换 / 标签
切换 标签示例
默认切换
彩色切换
滑动切换
圆形切换
标签示例
流光标签
拟态标签
霓虹标签
Tooltip & 提示
提示示例
这是悬浮提示文本
渐变风格提示
拟态风格提示
霓虹风格提示
三角形气泡提示
已复制到剪贴板
提示
这是一个自定义弹窗
