login界面代码
<template>
<!-- Video background -->
<div class="video-container">
<video class="video-background" autoplay muted loop>
<source src="@/assets/luoshen.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- 其他页面内容 -->
<div class="content">
<h1>欢迎来到我的页面</h1>
<p>这里是动态背景视频的效果展示。</p>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
</script>
<style scoped>
.video-container {
position: fixed; /* 固定在页面背景 */
top: 0;
left: 0;
width: 100%;
height: 100%; /* 覆盖整个页面 */
overflow: hidden; /* 隐藏超出的部分 */
z-index: -1; /* 保证视频在内容后面 */
}
.video-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中视频 */
width: 100%;
height: 100%;
object-fit: cover; /* 保证视频覆盖全屏 */
}
.content {
position: relative;
z-index: 1; /* 使内容位于视频之上 */
text-align: center;
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
h1 {
font-size: 3em;
margin: 0;
}
p {
font-size: 1.5em;
}
</style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
2024-01-17 springMVC重定向和转发区别
2024-01-17 springMvc如何解决请求中文乱码问题
2024-01-17 springMVC执行流程是啥
2024-01-17 springMVC包含那些注解