前言：
这里是展示一下做的登录页的一个好看的样式，同时也写了个下掘金登录页很有意思的捂脸小动画怎么实现的，感觉放在一起还挺好看的。
虽然不知道有没有问题，但是还是声明一下：我就是写来学习学习这种设计，以后遇到了可以直接套用这个思路，这个捂脸的图应该是人家掘金的，所以大家学习用用就好了，商用什么的如果算是侵权的话跟我没关系哈。
效果图
视频展示效果（gif不会弄，只能上传个视频看看了）
vue登录页捂脸效果星空效果预览
图片资源
代码部分
<template>
<div class="home">
<div>
<div class="loginBox">
<!-- 表情图部分 -->
<img :src="loginSrc" alt="表情图" class="loginImages" />
<!-- 登录框部分 -->
<el-card class="box_rgb">
<div class="login_title">智 能 学 习 平 台</div>
<el-form
label-width="80px"
:model="from"
:rules="rules"
ref="ruleForm"
class="login_input"
>
<!-- 账号部分 -->
<el-form-item label="账号" prop="username" class="login-text">
<el-input
v-model.trim="from.username"
@focus="changeImages(2)"
@blur="recoverImages"
></el-input>
</el-form-item>
<!-- 密码部分 -->
<el-form-item label="密码" prop="password" class="login-text">
<el-input
v-model.trim="from.password"
type="password"
style="margin-top: 5px"
@focus="changeImages(3)"
@blur="recoverImages"
></el-input>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item>
<el-button
type="primary"
style="width: 100%; margin-top: 10px; height: 40px"
@click="login"
>登录</el-button
>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
<!-- 星空效果部分 -->
<div class="two">
<div
class="three"
v-for="(item, index) in items"
:key="index"
ref="three"
></div>
</div>
</div>
</template>
<script>
import {
Message } from "element-ui";
import {
setToken } from "@/utils/auth";
export default {
name: "home",
data() {
//验证账号正则
var validatePass = (rule, value, callback) => {
//三个参数：规则，值，回调
//创建个正则用于判断
const reg = /^\w{4,8}$/;
//判断：账号验证是否通过
if (reg.test(value)) {
//放行
callback();
} else {
//提示错误信息
callback(new Error("必须是4到8位数字字母组合"));
}
};
return {
//星空效果div循环生成800个
items: 800,
distance: 800,
//双向绑定
from: {
username: "",
password: "",
},
//首页三个表情图切换
loginSrc: require("@/assets/login1.jpg"),
//验证条件
rules: {
//账号部分
username: [
//验证方法用validatePass,通过blur（失去焦点）事件判断验证，
{
validator: validatePass, trigger: "blur" },
//required：true代表必填，message：提示信息，trigger：根据什么事件判断，同上
{
required: true, message: "账号不能为空", trigger: "blur" },
],
//密码部分
password: [
{
required: true, message: "密码不能为空", trigger: "blur" },
],
},
};
},
created() {
//页面加载完全局监听键盘事件，然后调用函数
document.addEventListener("keyup", this.watchEnter);
},
destroyed() {
//页面跳转销毁全局监听事件
document.removeEventListener("keyup", this.watchEnter);
},
mounted() {
//星空效果
//获取dom 800个div
const starArr = this.$refs.three;
//循环div
starArr.forEach((item) => {
//随机数
const speed = 0.2 + Math.random() * 1;
const thisDistance = this.distance + Math.random() * 360;
//每一项的样式
item.style.transformOrigin = `0 0 ${
thisDistance}px`;
item.style.transform = `translate3d(0, 0, -${
thisDistance}px) rotateY(${
Math.random() * 360
}deg) rotateX(${
Math.random() * -50}deg) scale(${
speed})`;
});
},
methods: {
//登录验证
login() {
// //用$refs找到dom元素，验证是否通过。
this.$refs.ruleForm.validate((boolean) => {
//验证通过发请求
if (boolean) {
this.$axios
.get("/user/select", {
username: this.from.username,
password: this.from.password,
})
.then((res) => {
if (res == 200) {
//把token和昵称存到本地，方便后续守卫验证令牌，可以从本地调用昵称显示在另一个页面。
setToken("3arc9h0vhcr0f8iprpnscmfo8s");
//跳转到主页
this.$router.push("/");
} else {
Message({
type: "error",
message: "账号密码不正确，请从新输入",
});
}
})
.catch((error) => {
console.log(error, "请求失败");
});
}
});
},
//判断按键
watchEnter(e) {
//按键判断：e.which返回当前按键的键值，然后if判断键值是否等于13,13是回车键的键值。如果是调用登录方法发请求
let keyNum = e.which;
if (keyNum == 13) {
this.login();
}
},
//获取焦点时改变图片路径
changeImages(index) {
if (index == 2) {
this.loginSrc = require("@/assets/login2.jpg");
}
if (index == 3) {
this.loginSrc = require("@/assets/login3.jpg");
}
},
//失去焦点时恢复第一章图片
recoverImages() {
this.loginSrc = require("@/assets/login1.jpg");
},
},
};
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
}
/* input登录 */
.login_input {
margin-left: 40px;
margin-top: 130px;
width: 370px;
}
/* 背景色透明 */
.box_rgb {
height: 400px;
width: 550px;
border-radius: 30px;
background-image: linear-gradient(#263238, #2d94a7);
transform: translateX(50%);
margin-top: -200px;
box-shadow: 0px 0px 15px 5px #c4fcf0;
}
// login页表情图
.loginImages {
position: absolute;
top: -315px;
left: 84%;
width: 180px;
z-index: 2;
}
.loginBox {
position: absolute;
right: 50%;
top: 50%;
}
/* 标题 */
.login_title {
width: 300px;
text-align: center;
position: absolute;
right: 50%;
top: 50px;
transform: translateX(50%);
font-size: 34px;
font-weight: bold;
color: #fff6ff;
}
//星空效果样式部分
.home {
position: relative;
width: 100%;
height: 100%;
//星空图的背景渐变色
background: radial-gradient(
260% 67% at bottom center,
#32cbc6 10%,
#63baaa 40%,
#00838f 65%,
#263238 130%
);
overflow: hidden;
}
.two {
position: absolute;
left: 50%;
transform-style: preserve-3d;
transition: perspective(500deg);
perspective-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
-moz-perspective-origin: 50% 100%;
animation: xinkon 90s linear infinite;
bottom: -100px;
.three {
width: 2px;
height: 2px;
background: #fff9c4;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
}
@keyframes xinkon {
0% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg)
rotateY(-360deg);
}
}
</style>
<style>
.login-text .el-form-item__label {
color: #fff;
font-size: 16px;
}
</style>