Vue+Axios搭建二次元动态登录页面(mp4视频格式)
最近想做一个前端登录页面，背景好看的，格式中规中矩的，这么难？我自己创一个吧！
效果图如下：
源码可以参考我的github，复制源码即可用：gym02/loginPage_Vue: 使用Vue+Axios搭建的动态登录网页，按钮和输入框渲染了动画，复制即可使用 (github.com)
(喜欢可以点个小星星start)评论区可以私我发这个mp4的背景图
html源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title><script src="js/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="css/elementui.css"><!-- 引入组件库 --><script src="js/elementui.js"></script><script src="js/axios.min.js"></script><style>/*body {*//* background-image: url(/static/img/preview.gif);*//* background-repeat: no-repeat;*//* background-size: cover;*//* background-position: 0px -200px;*//*}*/.fullscreenvideo {position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -100;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);-webkit-transition: 1s opacity;transition: 1s opacity;}.videocontainer{position: fixed;width: 100%;height: 100%;overflow: hidden;z-index: -100;}.videocontainer:before{content: "";position: absolute;width: 100%;height: 100%;display: block;z-index: -1;top: 0;left: 0;background: rgba(0,0,0,0);}.login-box {position: absolute;top: 50%;left: 50%;width: 400px;padding: 40px;transform: translate(-50%, -50%);background: rgba(0, 0, 0, .5);box-sizing: border-box;box-shadow: 0 15px 25px rgba(0, 0, 0, .6);border-radius: 10px;}.login-box h2 {margin: 0 0 30px;padding: 0;color: #fff;text-align: center;}.login-box .user-box {position: relative;}.login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #fff;margin-bottom: 30px;border: none;border-bottom: 1px solid #fff;outline: none;background: transparent;}.login-box .user-box label {position: absolute;top: 0;left: 0;padding: 10px 0;font-size: 16px;color: #fff;pointer-events: none;transition: .5s;}.login-box .user-box input:focus ~ label,.login-box .user-box input:valid ~ label {top: -20px;left: 0;color: #03e9f4;font-size: 12px;}.login-box form a {position: relative;display: inline-block;padding: 10px 20px;color: #03e9f4;font-size: 16px;text-decoration: none;text-transform: uppercase;overflow: hidden;transition: .5s;margin-top: 40px;letter-spacing: 4px}.login-box a:hover {background: #03e9f4;color: #fff;border-radius: 5px;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;}.login-box a span {position: absolute;display: block;}.login-box a span:nth-child(1) {top: 0;left: -100%;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, #03e9f4);animation: btn-anim1 1s linear infinite;}@keyframes btn-anim1 {0% {left: -100%;}50%, 100% {left: 100%;}}.login-box a span:nth-child(2) {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg, transparent, #03e9f4);animation: btn-anim2 1s linear infinite;animation-delay: .25s}@keyframes btn-anim2 {0% {top: -100%;}50%, 100% {top: 100%;}}.login-box a span:nth-child(3) {bottom: 0;right: -100%;width: 100%;height: 2px;background: linear-gradient(270deg, transparent, #03e9f4);animation: btn-anim3 1s linear infinite;animation-delay: .5s}@keyframes btn-anim3 {0% {right: -100%;}50%, 100% {right: 100%;}}.login-box a span:nth-child(4) {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg, transparent, #03e9f4);animation: btn-anim4 1s linear infinite;animation-delay: .75s}@keyframes btn-anim4 {0% {bottom: -100%;}50%, 100% {bottom: 100%;}}</style></head>
<body>
<div class="videocontainer"><video class="fullscreenvideo" playsinline="" autoplay="" muted="" loop=""><source src="./img/girl.mp4" type="video/mp4"><!-- 在这改路径即可直接食用 --></video>
</div><div class="login-box"><h2>登录系统</h2><form><div class="user-box"><input type="text" name="" required="" v-model="user.username"><label>用户名</label></div><div class="user-box"><input type="password" name="" required="" v-model="user.password"><label>密码</label></div> <a @click="login()"><span></span><span></span><span></span><span></span>登录</a> <a >注册 </a></form>
</div>
<script>new Vue({el:".login-box",data:{user:{username:'',password:''}},methods:{login(){axios.post("/user/login",this.user).then(resp =>{if(resp.data.code == 200){window.location.href = "http://localhost:8080/index.html";this.$message({message: '登陆成功',type: 'success'});}else{this.$message({message: '登陆失败',type: 'error'});}})}}})
</script></body>
</html>里面引入的各种css，js文件可以在上面我给出的github链接找到，复制下来。因为格式很大，这里不便分享。
需要背景图的可以评论区私我，有求必回！
相关文章：
Vue+Axios搭建二次元动态登录页面(mp4视频格式)
最近想做一个前端登录页面，背景好看的，格式中规中矩的，这么难？我自己创一个吧！ 效果图如下： 源码可以参考我的github，复制源码即可用：gym02/loginPage_Vue: 使用VueAxios搭建的动态…...
【Kubernetes】K8S到底是什么，最近怎么这么火
前言 kubernetes，简称K8s，是用8代替名字中间的8个字符“ubernete”而成的缩写。是一个开源的，用于管理云平台中多个主机上的容器化的应用，Kubernetes的目标是让部署容器化的应用简单并且高效（powerful）,Kub…...
Java爬虫下载网页图片
在Java中，可以使用HttpURLConnection，Jsoup等库来实现网页爬取和图片下载。下面是一个基本的例子： 首先，需要添加Jsoup库到你的项目中。如果你使用Maven，可以在你的pom.xml文件中添加以下依赖： xml <…...
C语言之扫雷游戏实现篇
目录 主函数test.c 菜单函数 选择循环 扫雷游戏实现分析 整体思路 问题1 问题2 问题3 问题4 游戏函数（函数调用） 创建游戏盘数组mine 创建游戏盘数组show 初始化游戏盘数组InitBoard 展示游戏盘DisplayBoard 游戏盘置雷SetMine 游戏…...
Python面向对象中super用法与MRO机制
Python面向对象中super用法与MRO机制 最近再看trackformer，里面用到了super的用法，记录一下super的用法 class A(object):def __init__(self):print(init A)def fun(self):print(A.fun)print(self)super(A, self).fun()class B(object):def __init__(s…...
高性能网络模式-Reactor
事实上，Reactor 模式也叫Dispatcher模式，即I/O 多路复⽤监听事件，收到事件后，根据事件类型分配（Dispatch）给某个进程/线程。Reactor 模式也是一种非阻塞同步网络模式。 Reactor 模式主要由 Reactor部分和处…...
gRpc的四种通信方式详细介绍
🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…...
JWT令牌的介绍
目录 一、什么是JWT 二、JWT令牌和Cookie客户端、Session服务端对比 三、特点与注意事项 四、使用场景 优点： 五、结构组成 一、什么是JWT JWT（JSON Web Token）是一种用于在网络应用间传递信息的开放标准（RFC 7519&#x…...
C语言入门 Day_9 条件判断
目录 前言： 1.if判断 2.else判断 3.易错点 4.思维导图 前言： 我们知道比较运算和逻辑运算都会得到一个布尔型的数据，要么为真（true），要么为假（false）。 今天我们来学习真和假在…...
Nodejs-nrm：快速切换npm源 / npm官方源和其他自定义源之间切换
一、理解 Nodejs nrm Nodejs nrm 是一个管理 npm 源的工具。由于 npm 在国内的速度较慢，很多开发者会使用淘宝的 npm 镜像源，但是也会遇到一些问题，例如某些包在淘宝镜像源中不存在，或者淘宝镜像源本身也会有问题。 Nodejs nrm …...
数据驱动洞察：各种词频分析技术挖掘热点数据
一、引言 随着信息时代的发展，人们的关注点日益复杂多样。社交媒体、新闻网站和论坛等平台上涌现了大量的信息，这使得热点分析成为了解社会热点话题和舆情动向的重要手段。词频统计是热点分析的基础，本文将分别介绍基于ElasticSearch、基于S…...
ES6-简介、语法
ES6 ES6简介 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语…...
诚迈科技子公司智达诚远与Unity中国达成合作，打造智能座舱新时代
2023 年 8 月 23 日，全球领先的实时 3D 引擎 Unity 在华合资公司 Unity 中国举办发布会，正式对外发布 Unity 引擎中国版——团结引擎，并带来专为次世代汽车智能座舱打造的团结引擎车机版。发布会上，诚迈科技副总裁、诚迈科技子公司…...
算法与数据结构（十）--图的入门
一.图的定义和分类 定义：图是由一组顶点和一组能够将两个顶点连接的边组成的。 特殊的图： 1.自环：即一条连接一个顶点和其自身的边; 2.平行边：连接同一对顶点的两条边； 图的分类： 按照连接两个顶点的边的…...
【Go 基础篇】Go语言 init函数详解：包的初始化与应用
介绍 在Go语言中，init() 函数是一种特殊的函数，用于在包被导入时执行一次性的初始化操作。init() 函数不需要手动调用，而是在包被导入时自动执行。这使得我们可以在包导入时完成一些必要的初始化工作，确保包的使用具有正确的环境…...
wazuh环境配置及漏洞复现
目录 一、wazuh配置 1进入官网下载OVA启动软件 2.虚拟机OVA安装 二、wazuh案例复现 1.wazuh初体验 2.这里我们以SQL注入为例，在我们的代理服务器上进行SQL注入，看wazuh如何检测和响应 一、wazuh配置 1进入官网下载OVA启动软件 Virtual Machine (O…...
Java接收前端请求体方式
💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ！ 文章目录 RequestBodyPathVariableRequestParamValidated方法参数校验方法返回值校验 RequestHeaderHttpServletRequest ## Java接收前端请求体的方式 请求体…...
私有化部署即时通讯平台，30分钟替换钉钉和企业微信
随着企业对即时通讯和协作工具的需求不断增长，私有化部署的即时通讯平台成为企业的首选。WorkPlus作为有10余年行业深耕经验与技术沉淀品牌，以其安全高效的私有化部署即时通讯解决方案，帮助企业在30分钟内替换钉钉和企业微信。本文将深入探讨…...
如何深入理解 Node.js 中的流（Streams）
Node.js是一个强大的允许开发人员构建可扩展和高效的应用程序。Node.js的一个关键特性是其内置对流的支持。流是Node.js中的一个基本概念，它能够实现高效的数据处理，特别是在处理大量信息或实时处理数据时。 在本文中，我们将探讨Node.js中的流…...
MSP430FR2xxx开发（一）添加driverlib
一、新建工程 根据自己手上的硬件型号新建工程，文中已MSP430FR2355为例。 二、添加driverlib 首先去官方下载driverlib. https://www.ti.com.cn/tool/cn/MSPDRIVERLIB?keyMatchMSP430%20DRIVERLIB#downloads 下载后的内容如下： 我这里就选择MSP430…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践
6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
LOOI机器人的技术实现解析：从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品，通过将智能手机转变为具有情感交互能力的桌面机器人，展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家，我将全面解析LOOI的技术实现架构，特别是其手势识别、物体识别和环境…...