太炫了！首个专属于 Vue3 的动效组件库！

最新推荐文章于 2025-04-08 09:25:10 发布

奇舞周刊

最新推荐文章于 2025-04-08 09:25:10 发布

阅读量1.2k

点赞数 1

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw==&mid=2247514691&idx=1&sn=c2d322ddcf37794d8b4489575faaea6d&chksm=ceeb6c14564d8eec9bc6742710f421958b43a5d47ed7ba0303b598f97fbd24a42f8af2e2485e&scene=126&sessionid=0

版权

作为一名前端开发者，Element UI 和 Ant Design UI 等传统组件库虽然能满足日常中后台开发的需求，但有时候我们希望为用户带来更加炫酷的视觉体验。

最近，我偶然发现了一个专为 Vue3 设计的动效组件库——Inspira UI

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

Inspira UI 的特性

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

如何安装和使用 Inspira UI

创建 Vue3 项目

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

npm create vite@latest my-vue-app -- --template vue-ts
   npm install

引入 Tailwind CSS

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

npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

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

module.exports = {
     content: ["./src/**/*.{html,js,vue,ts}"],
     theme: {
       extend: {},
     },
     plugins: [],
   };

安装 Inspira UI 依赖

安装 Inspira UI 及其相关依赖：

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

配置项目

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

import { defineConfig } from'vite'
   import vue from'@vitejs/plugin-vue'
   import path from'path'

   exportdefault defineConfig({
     plugins: [vue()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src')
       }
     }
   })

修改 tsconfig.json 文件：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

特效组件案例展示

input 组件鼠标悬浮特效

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

upload 组件上传特效

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

类似苹果官网的滚动效果

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

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

LOGO 流光特效

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

Github 地球特效

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

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

粒子背景特效

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

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

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

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

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

Inspira UI 官网：https://inspira-ui.com
Inspira UI Github：https://github.com/unovue/inspira-ui

-END -

如果您关注前端+AI 相关领域可以扫码进群交流

添加小编微信进群😊

关于奇舞团

奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。