前端美学盛宴 ✨ 欢迎来到我的代码艺术空间！
🎉 热烈欢迎各位前端爱好者、设计师和开发者朋友们！ 🎉
我是你们的新朋友，一个对前端美学充满热忱的开发者。在这里，我将与大家分享那些让网页"活"起来的魔法代码！🎨
🌈 我们将一起探索
🔹 惊艳的CSS动画与特效 - 让页面跳动起来
🔹 精致的UI组件设计 - Vue驱动的交互之美
🔹 创意的页面布局方案 - 响应式与自适应艺术
🔹 实用的前端技巧 - 提升开发效率的小秘诀
💡 文章特色
✅ 即拿即用 - 每个示例都包含完整可运行的代码
✅ 循序渐进 - 从基础实现到高级优化全面解析
✅ 视觉优先 - 注重美学效果与用户体验平衡
✅ 技术前沿 - 结合最新前端技术栈与实践
🎁 近期更新预告
📌 流光溢彩的按钮动画合集 - 让点击成为享受
📌 玻璃态卡片设计全攻略 - 毛玻璃效果深度解析
📌 Vue 3 动态表单生成器 - 配置化表单解决方案
📌 CSS-only 加载动画库 - 零JS依赖的优雅加载
🤝 互动邀请
💬 期待与你们的交流！ 每篇文章都欢迎：
✍️ 分享你的实现变体
🔧 提出改进建议
❓ 讨论技术难点
💡 请求特定主题
🚀 开始我们的旅程
从下一个帖子开始，我们将一起动手创造既美观又实用的前端作品。无论你是刚入门的前端新人，还是经验丰富的老手，这里都有值得探索的内容！
准备好让你的代码绽放视觉魅力了吗？ 👩💻👨💻
📢 记得关注我，不错过每一次更新！ 让我们一起在前端的美学世界里创造、分享、成长！
"代码不仅是功能，更是艺术；界面不仅是工具，更是体验。" ✨
#前端开发 #CSS艺术 #Vue组件 #Web设计 #交互体验
🎯 下一篇文章即将发布，敬请期待！ 🎯
目录
一、使用的技术栈
VUE
二、具体操作
1、先准备一个mp4视频，放到项目的静态路径下
2、编写基础代码
html
<template>
<!-- 整个页面容器 -->
<div class="background-video-container">
<!-- 视频背景 -->
<video autoplay muted loop class="background-video">
<source :src="require('@/assets/login_video/video01.mp4')" type="video/mp4" />
Your browser does not support the video tag.
</video>
<!-- 用于展示页面内容的插槽，登录组件写到这里就行 -->
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
</script>
<style scoped>
/* 总：整个页面容器的css样式 */
.background-video-container {
position: relative;
width: 100%;
height: 100vh; /* 全屏视频 */
overflow: hidden;
}
/* 分1：视频背景的css样式 */
.background-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover; /* 确保视频覆盖整个背景 */
transform: translate(-50%, -50%);
z-index: 1; /* 视频置于底层 */
}
/* 分2：页面内容的css样式 */
.content {
position: relative;
z-index: 2; /* 页面内容放置于视频上层 */
color: #ffffff; /* 确保内容颜色在视频背景上清晰可见 */
}
</style>注意
<video>标签的三个属性：①
autoplay：视频自动播放
②``muted：静音③
loop：循环播放
运行项目，查看效果
3、在slot插槽，插入原来的登录页面代码
提一点建议：要将遮挡视频背景的组件设置成半透明，从而提升观感，如下
4、最终效果展示
以上就是本篇文章的全部内容，希望可以帮到你。
喜欢本篇文章的话，可以留个免费的关注呦~~~