50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 3dBackgroundBoxes（3D背景盒子组件）
📅 我们继续 50 个小项目挑战！—— 3dBackgroundBoxes组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的 <script setup> 语法结合 Tailwind CSS 来创建一个充满魔法感的交互式动画组件 —— “魔法盒子”。当你点击“Magic”按钮时，整个盒子阵列会放大并旋转，带来一种神奇的视觉体验！
准备好施展魔法了吗？让我们开始吧！✨
📝 应用目标
- 使用 Vue 3 Composition API 管理响应式状态
- 动态生成 4×4 的盒子网格
- 实现点击按钮触发整体缩放与旋转动画
- 利用背景定位实现 Gif 动画的分块显示
- 添加 3D 边框效果增强立体感
- 使用 Tailwind CSS 快速构建布局与过渡效果
🔧 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 <script setup> | 使用 ref 和 onMounted 管理状态与生命周期 |
响应式数据 isBig 和 boxes | 控制动画状态与盒子位置 |
v-for 循环生成 | 创建 16 个盒子元素 |
@click 事件绑定 | 触发尺寸切换 |
动态类名绑定 :class | 根据状态切换样式 |
内联样式 :style | 精确控制每个盒子的背景位置 |
| Tailwind 过渡动画 | 实现平滑的尺寸与旋转变化 |
🖌️ 组件实现
🎨 模板结构 <template>
<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]',]"><!-- 动态生成盒子 --><divv-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`,}"><!-- 3D效果伪元素通过Tailwind实现 --><divclass="absolute top-2 right-[-15px] h-full w-4 skew-y-12 transform bg-yellow-200"></div><divclass="absolute bottom-[-15px] left-2 h-4 w-full skew-x-12 transform bg-yellow-400"></div></div></div></div>
</template>
模板部分包含两个核心区域：
- 魔法按钮：固定在顶部，点击后切换
isBig状态。 - 盒子容器：包含 16 个盒子，每个盒子显示 Gif 图片的不同区域，并带有 3D 边框。
💻 脚本逻辑 <script setup>
<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组件。🚀
感谢阅读，欢迎点赞、收藏和分享 😊