网站导航
> 技术文档 > 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes（3D背景盒子组件）

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes（3D背景盒子组件）

网友: 技术文档 2025-08-08 05:53:52

📅 我们继续 50 个小项目挑战！—— 3dBackgroundBoxes组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes（3D背景盒子组件）

使用 Vue 3 的 语法结合 Tailwind CSS 来创建一个充满魔法感的交互式动画组件 —— “魔法盒子”。当你点击“Magic”按钮时，整个盒子阵列会放大并旋转，带来一种神奇的视觉体验！

准备好施展魔法了吗？让我们开始吧！✨

📝 应用目标

  • 使用 Vue 3 Composition API 管理响应式状态
  • 动态生成 4×4 的盒子网格
  • 实现点击按钮触发整体缩放与旋转动画
  • 利用背景定位实现 Gif 动画的分块显示
  • 添加 3D 边框效果增强立体感
  • 使用 Tailwind CSS 快速构建布局与过渡效果

🔧 技术实现点

技术点 描述 Vue 3 使用 ref 和 onMounted 管理状态与生命周期 响应式数据 isBig 和 boxes 控制动画状态与盒子位置 v-for 循环生成 创建 16 个盒子元素 @click 事件绑定 触发尺寸切换 动态类名绑定 :class 根据状态切换样式 内联样式 :style 精确控制每个盒子的背景位置 Tailwind 过渡动画 实现平滑的尺寸与旋转变化

🖌️ 组件实现

🎨 模板结构 

<template> <div class=\"flex h-screen flex-col items-center justify-center overflow-hidden bg-gray-100\">  <button @click=\"isBig = !isBig\" class=\"font-poppins fixed top-5 z-50 transform rounded bg-yellow-400 px-5 py-3 text-white shadow-md transition-all duration-200 hover:shadow-lg active:translate-y-1 active:shadow-none\"> Magic 🎩 </button>  <div :class=\"[ \'relative flex flex-wrap justify-around transition-all duration-400\', isBig ? \'h-[600px] w-[600px]\' : \'h-[500px] w-[500px]\', ]\">  <div v-for=\"(box, index) in boxes\" :key=\"index\" :class=\"[  \'relative h-[125px] w-[125px] transition-all duration-400\',  isBig ? \'rotate-360\' : \'rotate-0\', ]\" :style=\"{  backgroundImage: \'url(https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif)\',  backgroundRepeat: \'no-repeat\',  backgroundSize: \'500px 500px\',  backgroundPosition: `${box.x}px ${box.y}px`, }\">  <div  class=\"absolute top-2 right-[-15px] h-full w-4 skew-y-12 transform bg-yellow-200\"></div> <div  class=\"absolute bottom-[-15px] left-2 h-4 w-full skew-x-12 transform bg-yellow-400\"></div> </div> </div> </div></template>

模板部分包含两个核心区域：

  1. 魔法按钮：固定在顶部，点击后切换 isBig 状态。
  2. 盒子容器：包含 16 个盒子，每个盒子显示 Gif 图片的不同区域，并带有 3D 边框。

💻 脚本逻辑 

<script setup> import { ref, onMounted } from \'vue\' // 响应式状态管理 const isBig = ref(false) const boxes = ref([]) // 创建盒子数据 function createBoxes() { const boxArray = [] for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { boxArray.push({  x: -j * 125,  y: -i * 125, }) } } boxes.value = boxArray } // 组件挂载时创建盒子 onMounted(() => { createBoxes() })</script>

脚本部分负责：

  • 定义 isBig 响应式变量控制动画状态。
  • 定义 boxes 数组存储每个盒子的背景偏移位置。
  • 在 onMounted 钩子中调用 createBoxes() 生成 4×4 的盒子数据。

🎨 Tailwind CSS 样式重点

类名 作用 h-screen 设置高度为视口高度 flex-col 垂直方向 Flex 布局 items-center / justify-center 居中对齐 overflow-hidden 隐藏溢出内容 bg-gray-100 设置背景色 fixed top-5 按钮固定在顶部 z-50 提升按钮层级 transform 启用变换 rounded 圆角按钮 bg-yellow-400 / text-white 按钮颜色 shadow-md / hover:shadow-lg 阴影效果 active:translate-y-1 按下时向下移动 active:shadow-none 按下时隐藏阴影 relative / flex-wrap 容器布局 transition-all duration-400 0.4s 平滑过渡 h-[125px] w-[125px] 固定盒子尺寸 rotate-360 / rotate-0 控制旋转状态 absolute top-2 right-[-15px] 创建右侧斜面 skew-y-12 Y轴倾斜12度 bg-yellow-200 / bg-yellow-400 3D边框颜色

🔍 关键功能解析

✅ 背景分块显示技术

通过设置 backgroundSize: \'500px 500px\' 并为每个盒子设置不同的 backgroundPosition（x: -j * 125, y: -i * 125），实现了将一张大图（或Gif）切割成16块分别显示的效果。

✅ 动画同步控制

使用 isBig 变量统一控制容器尺寸和所有盒子的旋转状态，确保动画同步进行。

✅ 3D 边框模拟

利用两个倾斜的 div（.skew-y-12 和 .skew-x-12）模拟出立体边框效果，增强视觉层次感。

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{ id: 40, title: \'3dBackgroundBoxes\', image: \'https://50projects50days.com/img/projects-img/40-3d-background-boxes.png\', link: \'3dBackgroundBoxes\', },

router/index.js 中添加路由选项：

{ path: \'/3dBackgroundBoxes\', name: \'3dBackgroundBoxes\', component: () => import(\'@/projects/3dBackgroundBoxes.vue\'), },

🏁 总结

想让你的魔法盒子更炫酷？试试这些扩展：

  • ✅ 添加音效：点击时播放魔法音效
  • ✅ 随机旋转角度：每个盒子旋转角度不同
  • ✅ 颜色主题切换：支持多种配色方案
  • ✅ 手势控制：支持触摸滑动触发动画
  • ✅ 粒子特效：点击时释放小星星或火花动画

👉 下一篇，我们将完成VerifyAccountUi组件，实现了一个非常使用的验证码UI组件。🚀

感谢阅读，欢迎点赞、收藏和分享 😊

网络标签：

相关问题