炫酷登录界面（html+css）

背景图片摘自网络图片，请勿商用

html部分：

<template><div class="container"><div class="loginbox_out"><div class="loginbox"><div class="topic"><span>用户登录</span></div><div class="inputbox"><input typeof="text" required="required" v-model="userid"/><span>用户名</span></div><div class="inputbox"><input typeof="text" required="required" v-model="password"/><span>密码</span></div><div class="login_button"><div class="login_b" @click="login_check()"><span style="color: #5fffff">登</span><span style="color: #5fffff">录</span></div></div></div></div></div></template>

css部分：

.container{width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;background: url(veer-345522827.jpg) no-repeat;background-size: 100% 100%;}.loginbox_out{width: 382px;height: 452px;backdrop-filter: blur(30px);border-radius: 10px;position: relative;margin: auto;display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;justify-content: center;background: transparent;overflow: hidden;}.loginbox{width: 380px;height: 450px;backdrop-filter: blur(300px);border-radius: 10px;position: relative;margin: auto;display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;justify-content: center;background: transparent;z-index: 1;margin-top: 1px;}.login_button{width: 100%;height: auto;margin-top: 20%;display: flex;justify-content: center;align-items: center;}.login_b{width: 30%;height: 45px;background: #1c1c1c;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;border-radius: 10px;transition: all .3s;}.login_b:hover{box-shadow: 2px -2px 20px 0px;transition: all .3s;cursor: pointer;}.login_b span{width: 30%;display: flex;justify-content: center;align-items: center;}.topic{width: 100%;height: 25%;font-size: 25px;color: #1c1c1c;display: flex;justify-content: center;align-items: center;font-weight: bold;}.inputbox{position:relative;width: 255px;height: 40px;margin-top: 40px;}.inputbox input{width: 245px;height: 40px;font-size: 16px;outline: white;border-bottom:1px solid #1c1c1c;border-left:1px solid transparent;border-right:1px solid transparent;border-top:1px solid transparent;background: transparent;color: #1c1c1c;padding-left: 10px;}.inputbox span{position: absolute;left: 0;top: 0;padding: 10px;font-size: 16px;text-transform: uppercase;pointer-events: none;transition: 0.32s;color: #1c1c1c;font-weight: bold;}.inputbox input:valid ,.inputbox input:focus{transition: all .3s;color: #1c1c1c;}.inputbox input:valid ~ span,.inputbox input:focus ~ span{color: #1c1c1c;transform: translateY(-25px) translateX(-9px);font-size: 16px;padding: 1px 10px;border-radius: 3px;}.inputbox:nth-child(3) input:valid ~ span,.inputbox:nth-child(3) input:focus ~ span{color: #1c1c1c;transform: translateY(-25px) translateX(-9px);font-size: 16px;padding: 1px 10px;border-radius: 3px;}