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>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a @click="login()">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      登录
    </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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链接找到,复制下来。因为格式很大,这里不便分享。

需要背景图的可以评论区私我,有求必回!

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的使用 VueAxios 实现登录界面的例子: 首先,需要在 Vue 项目中安装 Axios: ```bash npm install axios --save ``` 接着,在 Vue 组件中引入 Axios 并使用它发送登录请求: ```html <template> <div> <h1>登录</h1> <form @submit.prevent="login"> <div> <label>用户名:</label> <input v-model="username" type="text"> </div> <div> <label>密码:</label> <input v-model="password" type="password"> </div> <button type="submit">登录</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { username: '', password: '', }; }, methods: { login() { axios.post('/login', { username: this.username, password: this.password, }).then(response => { // 登录成功,跳转到首页 this.$router.push('/home'); }).catch(error => { // 登录失败,显示错误信息 console.error(error); alert('登录失败,请重试!'); }); }, }, } </script> ``` 在这个例子中,我们使用 `axios.post()` 方法来发送登录请求。在请求体中,我们将表单中输入的用户名和密码作为参数传递给服务器。如果登录成功,我们使用 `$router.push()` 方法来跳转到首页;否则,我们显示一个错误信息。 注意,这只是一个简单的例子,实际情况下,我们需要根据具体的业务需求来实现更加完善的登录逻辑。同时,在实际应用中,还需要对用户输入进行校验,防止 XSS、CSRF 等安全问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gavana.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值