Inspira UI

提供了丰富的动画效果，还支持高度自定义和灵活的集成方式，能够轻松实现吸引眼球的用户界面。

Inspira UI 的特性

• 内置动画与动效：Inspira UI 提供了丰富的内置动画效果，无需额外引入动画库即可实现流畅的过渡效果。
• 高度自定义：每个组件都支持高度自定义，开发者可以根据项目需求调整样式和动画效果，满足独特的设计需求。
• 支持 Vue3 和 Nuxt：Inspira UI 完全兼容 Vue3 和 Nuxt.js，能够无缝集成到现有的项目中，为开发者提供现代化的开发体验。
• 轻量级与高性能：该组件库经过优化，确保加载速度快且运行流畅，即使在移动设备上也能提供出色的用户体验。

如何安装和使用 Inspira UI

创建 Vue3 项目

如果你还没有创建 Vue3 项目，可以使用 Vite 快速创建一个项目：

1. npm create vite@latest my-vue-app — –template vue-ts
2.    npm install

引入 Tailwind CSS

Inspira UI 基于 Tailwind CSS，因此需要先引入 Tailwind CSS：

1. npm install -D tailwindcss postcss autoprefixer
2.    npx tailwindcss init -p

然后在 tailwind.config.js 中添加内容：

1. module.exports = {
2.      content: [“./src/**/*.{html,js,vue,ts}”],
3.      theme: {
4.        extend: {},
5.      },
6.      plugins: [],
7.    };

安装 Inspira UI 依赖

安装 Inspira UI 及其相关依赖：

1. npm install -D @inspira-ui/plugins clsx tailwind-merge class-variance-authority tailwindcss-animate
2.    npm install @vueuse/core @vueuse/motion

配置项目

修改 vite.config.ts 文件，使用 @ 代替 /src：

1. import { defineConfig } from‘vite’
2.    import vue from‘@vitejs/plugin-vue’
3.    import path from‘path’
5.    exportdefault defineConfig({
6.      plugins: [vue()],
7.      resolve: {
8.        alias: {
9.          ‘@’: path.resolve(__dirname, ‘src’)
10.        }
11.      }
12.    })

修改 tsconfig.json 文件：

1. {
2.   “compilerOptions”: {
3.     “baseUrl”: “.”,
4.     “paths”: {
5.       “@/*”: [“src/*”]
6.     }
7.   }
8. }

特效组件案例展示

input 组件鼠标悬浮特效

Inspira UI 的 input 组件在鼠标悬停时会触发动态效果，例如渐变色的边框或阴影，让输入框看起来更加生动。

upload 组件上传特效

当用户上传文件时，Inspira UI 的 upload 组件会展示和传统上传组件不一样的动画效果

类似苹果官网的滚动效果

Inspira UI 提供了动态背景动画，能够根据用户操作或页面滚动触发，让整个页面更具生命力。

这种效果类似于苹果官网的滚动动画，能够吸引用户的注意力并提升浏览体验。

LOGO 流光特效

Inspira UI 的 LOGO 组件支持流光效果，通过渐变色和动态光效让品牌标识更加引人注目。

Inspira UI 提供了一个 3D 地球模型组件，鼠标悬停时会触发地球的旋转和放大效果，营造出沉浸式的视觉体验。

这种特效特别适合用于展示开源项目或技术团队的页面。

粒子背景特效

Inspira UI 的粒子背景特效能够根据页面滚动或用户操作动态变化，营造出梦幻般的视觉效果。

这种特效特别适合用于项目首页或宣传页面，能够显著提升用户的视觉体验。

Inspira UI 是一个专为 Vue3 设计的动效组件库，官方的动效组件示例数更是达到了 100+ 个

无论是简单的转场动画还是复杂的交互效果，Inspira UI 都能轻松实现。

如果你希望为项目增添炫酷的视觉效果，不妨尝试这个组件库，它一定会让你的项目更具吸引力。