30个精心设计的创意交互组件，由第九宴 (ninth-feast) 打造
🌐 在线预览: https://tailwind.component.ninthfeast.com
- 🎨 30个创意组件 - 涵盖各种交互特效和视觉艺术
- ⚡ 零依赖 - 纯 Tailwind CSS + Vanilla JavaScript
- 📱 响应式设计 - 完美适配各种设备
- 🎯 开箱即用 - 复制代码即可使用
- 🚀 性能优化 - 使用 requestAnimationFrame
- 💎 高质量代码 - 清晰注释，易于理解
- 液态形态按钮 - 液体流动、液滴效果、粒子爆炸
- 神经网络加载器 - 神经元节点、脉冲传递、数据流动
- 重力感应卡片 - 3D倾斜、视差效果、动态阴影
- 粒子文字生成器 - 粒子组成文字、鼠标吸引、爆炸重组
- DNA螺旋时间轴 - 双螺旋结构、3D旋转、事件展示
- 声波可视化卡片 - 点击产生声波扩散效果
- 磁力吸附菜单 - 菜单项受鼠标磁力影响
- 代码矩阵背景 - Matrix风格字符雨
- 全息投影卡片 - 扫描线、故障艺术、全息效果
- 量子纠缠按钮组 - 按钮之间互相影响
- 液晶翻牌计数器 - 机场显示屏风格翻牌
- 星空连线图 - 星座式粒子连接
- 水墨扩散菜单 - 中国水墨画风格扩散
- 时空扭曲输入框 - 输入时产生粒子扭曲
- 生物发光按钮 - 深海生物发光效果
- 螺旋画廊 - 3D螺旋展示，20个项目呈螺旋排列
- 音频频谱可视化 - 64个彩色频谱柱动态跳动
- 磁流体模拟 - 200个粒子受鼠标磁力影响
- 光线追踪按钮 - 光束从左到右扫描效果
- 万花筒效果 - 6重对称旋转镜像图案
- 涟漪加载器 - 水波纹扩散加载动画
- 霓虹灯文字 - 闪烁发光的霓虹文字
- 3D立方体菜单 - 六面立方体自动旋转
- 漩涡吸入效果 - 100个粒子螺旋吸入中心
- 极光背景 - 多层北极光流动效果
- 烟雾扩散 - 粒子烟雾向上飘散
- 像素雨 - 彩色像素方块下落动画
- 弹性按钮 - 点击产生果冻般挤压弹跳
- 雷达扫描 - 旋转扫描带随机目标点
- 彩虹进度条 - 动态彩虹渐变进度
直接访问: https://tailwind.component.ninthfeast.com
# 克隆项目
git clone https://github.com/di-ba-yan/tailwind-component-list.git
# 进入目录
cd tailwind-component-list
# 使用任何HTTP服务器运行
# 方式1: Python
python -m http.server 8000
# 方式2: Node.js
npx serve .
# 方式3: 直接打开
open index.html每个组件都是独立的，可以直接复制对应的 CSS 和 JavaScript 代码到你的项目中。
- Tailwind CSS - 实用优先的CSS框架
- Canvas API - 图形渲染和动画
- Vanilla JavaScript - 原生JavaScript，无框架依赖
- CSS Animations - CSS3动画和过渡
- requestAnimationFrame - 性能优化的动画循环
- 总组件数: 30个
- 代码行数: ~3000行
- 文件大小: ~150KB
- 浏览器支持: Chrome, Firefox, Safari, Edge (现代浏览器)
- 移动端支持: ✅
本项目包含完整的 SEO 优化：
- ✅ Meta标签优化
- ✅ Open Graph标签（社交媒体分享）
- ✅ Twitter Card标签
- ✅ 结构化数据（Schema.org）
- ✅ 语义化HTML
- ✅ 响应式设计
- ✅ 性能优化
MIT License
Copyright (c) 2024 第九宴 (ninth-feast)
第九宴 (ninth-feast)
- 🌐 官网: https://ninthfeast.com
- 📧 邮箱: lhqs.gu@gmail.com
- 💼 GitHub: https://github.com/di-ba-yan/tailwind-component-list
感谢所有为这个项目提供灵感和支持的朋友们！
⭐ 如果这个项目对你有帮助，请给个 Star！