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>
 
posted @   langpo  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
历史上的今天:
2024-01-17 springMVC重定向和转发区别
2024-01-17 springMvc如何解决请求中文乱码问题
2024-01-17 springMVC执行流程是啥
2024-01-17 springMVC包含那些注解
点击右上角即可分享
微信分享提示