实现效果：html源码来自b站up主：【CSS+JS】甲方：啊？没叫你做那么超前啊_哔哩哔哩_bilibili
本人仅实现了将html格式改为vue3
html版：
对于前端连入门可能都没摸到，学了半天也就改成vue3了，对于输入密码时会显示两个查看密码的问题还是没头绪，希望有大佬会的话可以讲一下。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>山羊の前端小窝</title><style>* {box-sizing: border-box;transition: .2s;}:root {--bgColor: white;--border: black;--inputColor: black;--outlineColor: rgb(60, 115, 235);}body {display: flex;justify-content: center;align-items: center;height: 100vh;overflow: hidden;background: var(--bgColor);}body.show-password {--bgColor: rgba(0, 0, 0, 0.9);--inputColor: white;--border: rgb(255, 255, 255);}.shell {width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;background-image: url(./img/1.png);background-size: cover;}form {transform: translate3d(0, 0, 0);padding: 50px;border: 20px solid var(--border);border-radius: 10px;box-shadow: 10px 10px 10px #00000065;}form > * + * {margin-top: 15px;}.form-item > * + * {margin-top: 0.5rem;}h2,label,input,button {font-size: 2rem;font-family: '优设标题黑';color: var(--inputColor);}h2 {font-size: 4rem;margin: 0;}label:focus,input:focus,button:focus {outline-offset: 2px;}label::-moz-focus-inner,input::-moz-focus-inner,button::-moz-focus-inner {border: none;}label[id=password],input[id=password],button[id=password] {color: black;}button {border: none;}[id=submit] {cursor: pointer;width: 100%;margin: 20px 0 0 2px;padding: 0.75rem 1.25rem;color: var(--bgColor);background-color: var(--inputColor);box-shadow: 4px 4px 0 rgba(30, 144, 255, 0.2);}[id=submit]:active {transform: translateY(1px);}.input-wrapper {position: relative;}input {padding: 0.75rem 4rem 0.75rem 0.75rem;width: 100%;border: 2px solid transparent;border-radius: 0;/* 设置背景颜色为透明 */background-color: transparent;box-shadow: inset 0 0 0 2px black,inset 6px 6px 0 rgba(30, 144, 255, 0.2),3px 3px 0 rgba(30, 144, 255, 0.2);-webkit-appearance: none;}input:focus {outline-offset: 1px;}.show-password input {box-shadow: inset 0 0 0 2px black;border: 2px dashed white;}.show-password input:focus {outline: none;border-color: rgb(255, 255, 145);}/* 设置眼睛按钮样式 */[id=eyeball] {--size: 1.25rem;display: flex;align-items: center;justify-content: center;cursor: pointer;outline: none;position: absolute;top: 50%;right: 0.75rem;border: none;background-color: transparent;transform: translateY(-50%);}[id=eyeball]:active {transform: translateY(calc(-50% + 1px));}.eye {width: var(--size);height: var(--size);border: 2px solid var(--inputColor);border-radius: calc(var(--size) / 1.5) 0;transform: rotate(45deg);}.eye:before,.eye:after {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;border-radius: 100%;}.eye:before {width: 35%;height: 35%;background-color: var(--inputColor);}.eye:after {width: 65%;height: 65%;border: 2px solid var(--inputColor);border-radius: 100%;}/* 设置光束样式 */[id=beam] {position: absolute;top: 50%;right: 1.75rem;clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);width: 100vw;height: 25vw;z-index: 1;mix-blend-mode: multiply;transition: transform 200ms ease-out;transform-origin: 100% 50%;transform: translateY(-50%) rotate(var(--beamDegrees, 0));pointer-events: none;}.show-password [id=beam] {background: rgb(255, 255, 145);}</style>
</head><body>
<div class="shell"><form><h2>LOGIN</h2><div class="form-item"><label for="username">Username</label><div class="input-wrapper"><input type="text" id="username"/></div></div><div class="form-item"><label for="password">Password</label><div class="input-wrapper"><input type="password" id="password"/><button type="button" id="eyeball"><div class="eye"></div></button><div id="beam"></div></div></div><button id="submit">Sign in</button></form>
</div>
<script>const root = document.documentElement;const eye = document.querySelector('#eyeball');const beam = document.querySelector('#beam');const passwordInput = document.querySelector('#password');root.addEventListener('mousemove', (e) => {let rect = beam.getBoundingClientRect();let mouseX = rect.right + (rect.width / 2);let mouseY = rect.top + (rect.height / 2);let rad = Math.atan2(mouseX - e.pageX, mouseY - e.pageY);let degrees = (rad * (20 / Math.PI) * -1) - 350;root.style.setProperty('--beamDegrees', `${degrees}deg`);});eye.addEventListener('click', e => {e.preventDefault();document.body.classList.toggle('show-password');passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';//passwordInput.focus();});
</script>
</body></html>vue3版本：
不是很会前端，改为vue3后部分效果消失，自己试着改了改，可以直接在handleLogin中处理自己的提交方法。
会提示beam元素可能为空，但不影响实际使用。
<template><div ref="bigBox" class="bigBox" :class="{ showPassword: isshowPassword }"><div class="shell"><form @submit.prevent="handleLogin"><h2>LOGIN</h2><div class="form-item"><label for="username">Username</label><div class="input-wrapper"><inputtype="text"id="userAccount"v-model="Loginform.userAccount"autocomplete="off"autocorrect="off"autocapitalize="off"spellcheck="false"data-lpignore="true"/></div></div><div class="form-item"><label for="userPassword">Password</label><div class="input-wrapper"><input:type="showPasswordType"id="password"ref="password"v-model="Loginform.userPassword"autocomplete="off"autocorrect="off"autocapitalize="off"spellcheck="false"data-lpignore="true"/><button type="button" id="eyeball" @click="eyeball"><div class="eye"></div></button><div id="beam"></div></div></div><button id="submit">Login in</button></form></div></div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { UserControllerService, UserLoginRequest } from "../../../../generated";
import { useRouter } from "vue-router";
import { useStore } from "vuex";const router = useRouter();
const store = useStore();
// 创建响应式表单数据
const Loginform = reactive({userAccount: "",userPassword: "",
} as UserLoginRequest);
// 定义登录处理函数
const handleLogin = async () => {// 弹窗显示账号密码alert(JSON.stringify(Loginform));
};
/*** css样式*/const form = reactive({showPassword: false,
});
let passwordInput = document.querySelector("#password");
// 计算属性，根据 showPassword 的值返回 'password' 或 'text'
const showPasswordType = computed(() =>form.showPassword ? "text" : "password"
);let isshowPassword = ref(false);onMounted(() => {const root = ref(document.documentElement); // 获取根元素const beam = document.querySelector("#beam"); // 获取光束元素const eye = document.querySelector("#eyeball"); // 获取眼睛按钮元素passwordInput = document.querySelector("#password"); // 获取密码输入框元素// 然后使用 beam.value, eye.value, passwordInput.value 来访问 DOM 元素// 鼠标移动事件监听器root.value.addEventListener("mousemove", (e) => {// 获取光束的位置和鼠标位置let rect = beam.getBoundingClientRect(); // 获取光束元素的位置信息let mouseX = rect.right + rect.width / 2; // 光束的横坐标let mouseY = rect.top + rect.height / 2; // 光束的纵坐标// 计算角度let rad = Math.atan2(mouseX - e.pageX, mouseY - e.pageY); // 计算鼠标和光束之间的角度let degrees = rad * (20 / Math.PI) * -1 - 350; // 将弧度转换为角度// 设置根元素的样式变量root.value.style.setProperty("--beamDegrees", `${degrees}deg`); // 设置根元素的样式变量，控制光束的旋转角度});
});
//点击显示密码
const eyeball = () => {form.showPassword = !form.showPassword;if (!isshowPassword.value) {isshowPassword.value = true;} else {isshowPassword.value = false;}
};
</script>
<style scoped>
/* 设置全局样式 */
* {box-sizing: border-box;transition: 0.2s;
}/* 设置根元素变量 */
:root {--bgColor: white;/* 设置背景颜色变量为白色 */--inputColor: black;/* 设置输入框颜色变量为黑色 */--outlineColor: rgb(60, 115, 235);/* 设置输入框边框颜色变量为RGB(60, 115, 235) */--border: black;--beamDegrees: 0deg; /* 添加默认值 *//* ... 其他变量定义 */
}/* 设置body样式 */
.bigBox {display: flex;/* 设置body元素为flex布局 */justify-content: center;/* 水平居中对齐 */align-items: center;/* 垂直居中对齐 */height: 100vh;/* 设置body元素的高度为视口高度 */overflow: hidden;/* 隐藏溢出内容 */background: var(--bgColor, #ffffff);/* 设置背景颜色为变量--bgColor的值 */
}/* 设置外层容器样式 */
.shell {width: 100%;/* 设置外层容器的宽度为100% */height: 100vh;/* 设置外层容器的高度为视口高度 */display: flex;/* 设置外层容器为flex布局 */align-items: center;/* 垂直居中对齐 */justify-content: center;/* 水平居中对齐 */background-image: url(../../img/1.webp);/* 设置背景图片为./img/1.png */background-size: cover;/* 背景图片等比例缩放铺满容器 */
}/* 设置表单样式 */
form {transform: translate3d(0, 0, 0);/* 3D变换，无位移 */padding: 50px;/* 设置内边距为10px */border: 20px solid var(--border, #000000);border-radius: 10px;box-shadow: 10px 10px 10px #00000065;
}form > * + * {margin-top: 15px;/* 设置相邻元素之间的上边距为15px */
}.form-item > * + * {margin-top: 0.5rem;/* 设置相邻元素之间的上边距为0.5rem */
}/* 设置label, input, button样式 */
h2,
label,
input,
button {font-size: 2rem;/* 设置字体大小为2rem */color: var(--inputColor, #000000);/* 设置字体颜色为变量--inputColor的值 */font-family: "优设标题黑";
}h2 {font-size: 4rem;margin: 0;
}label:focus,
input:focus,
button:focus {outline-offset: 2px;/* 设置聚焦时的外边距为2px */
}label::-moz-focus-inner,
input::-moz-focus-inner,
button::-moz-focus-inner {border: none;/* 去掉Firefox浏览器的聚焦时的内边框 */
}/* 设置密码相关样式 */
label[id="userPassword"],
input[id="userPassword"],
button[id="userPassword"] {color: black;/* 设置字体颜色为黑色 */
}/* 设置按钮样式 */
button {border: none;/* 去掉按钮的边框 */
}[id="submit"] {width: 100%;cursor: pointer;/* 设置鼠标样式为手型 */margin: 20px 0 0 2px;/* 设置外边距为20px 0 0 2px */padding: 0.75rem 1.25rem;/* 设置内边距为0.75rem 1.25rem */color: var(--bgColor, #ffffff);/* 设置字体颜色为变量--bgColor的值 */background-color: var(--inputColor, #000000);/* 设置背景颜色为变量--inputColor的值 */box-shadow: 4px 4px 0 rgba(30, 144, 255, 0.2);/* 设置阴影效果 */
}[id="submit"]:active {transform: translateY(1px);/* 设置点击时向下位移1px */
}/* 设置输入框包裹器样式 */
.input-wrapper {position: relative;/* 设置相对定位 */
}/* 设置输入框样式 */
input {padding: 0.75rem 4rem 0.75rem 0.75rem;/* 设置内边距为0.75rem 4rem 0.75rem 0.75rem */width: 100%;/* 设置宽度为100% */border: 2px solid transparent;/* 设置边为2px透明 */border-radius: 0;/* 设置边框圆角为0 */background-color: transparent;/* 设置背景颜色为透明 */box-shadow: inset 0 0 0 2px black, inset 6px 6px 0 rgba(30, 144, 255, 0.2),3px 3px 0 rgba(30, 144, 255, 0.2);/* 设置阴影效果 */-webkit-appearance: none;/* 去掉Webkit浏览器的默认样式 */
}/*输入密码后样式*/
input:focus {outline-offset: 1px;/* 设置聚焦时的外边距为1px */
}/* 设置显示密码时的输入框样式 */
.showPassword input {box-shadow: inset 0 0 0 2px black;/* 设置阴影效果 */border: 2px dashed white;/* 设置边框为2px虚线白色 */
}.showPassword input:focus {outline: none;/* 去掉聚焦时的外边框 */border-color: rgb(255, 255, 145);/* 设置边框颜色为RGB(255, 255, 145) */
}.showPassword input[id="userPassword"] {type: text;
}/* 设置眼睛按钮样式 */
[id="eyeball"] {--size: 1.25rem;/* 设置变量--size的值为1.25rem */display: flex;/* 设置为flex布局 */align-items: center;/* 垂直居中对齐 */justify-content: center;/* 水平居中对齐 */cursor: pointer;/* 设置鼠标样式为手型 */outline: none;/* 去掉聚焦时的外边框 */position: absolute;/* 设置绝对定位 */top: 50%;/* 设置顶部距离为50% */right: 0.75rem;/* 设置右侧距离为0.75rem */border: none;/* 去掉边框 */background-color: transparent;/* 设置背景颜色为透明 */transform: translateY(-50%);/* 设置向上位移50% */
}[id="eyeball"]:active {transform: translateY(calc(-50% + 1px));/* 设置点击时向上位移50% + 1px */
}.eye {width: var(--size);/* 设置宽度为变量--size的值 */height: var(--size);/* 设置高度为变量--size的值 */border: 2px solid var(--inputColor, #000000);/* 设置边框为2px实线，颜色为变量--inputColor的值 */border-radius: calc(var(--size) / 1.5) 0;/* 设置边框圆角为变量--size的值除以1.5，0 */transform: rotate(45deg);/* 设置旋转45度 */
}.eye:before,
.eye:after {content: "";/* 清空内容 */position: absolute;/* 设置绝对定位 */top: 0;/* 设置顶部距离为0 */right: 0;/* 设置右侧距离为0 */bottom: 0;/* 设置底部距离为0 */left: 0;/* 设置左侧距离为0 */margin: auto;/* 设置自动外边距 */border-radius: 100%;/* 设置边框圆角为100% */
}.eye:before {width: 35%;/* 设置宽度为35% */height: 35%;/* 设置高度为35% */background-color: var(--inputColor, #000000);/* 设置背景颜色为变量--inputColor的值 */
}.eye:after {width: 65%;/* 设置宽度为65% */height: 65%;/* 设置高度为65% */border: 2px solid var(--inputColor, #000000);/* 设置边框为2px实线，颜色为变量--inputColor的值 */border-radius: 100%;/* 设置边框圆角为100% */
}/* 设置光束样式 */
[id="beam"] {position: absolute;/* 设置绝对定位 */top: 50%;/* 设置顶部距离为50% */right: 1.75rem;/* 设置右侧距离为1.75rem */clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);/* 设置剪切路径为多边形 */width: 100vw;/* 设置宽度为100vw */height: 25vw;/* 设置高度为25vw */z-index: 1;/* 设置层级为1 */mix-blend-mode: multiply;/* 设置混合模式为multiply */transition: transform 200ms ease-out;/* 设置过渡效果为200ms的ease-out */transform-origin: 100% 50%;/* 设置变换原点为右侧50% */transform: translateY(-50%) rotate(var(--beamDegrees, 0));/* 设置向上位移50%并旋转--beamDegrees度 */pointer-events: none;/* 禁用指针事件 */
}.showPassword [id="beam"] {background: rgb(255 255 145 / 73%);/* 设置背景颜色为RGB(255, 255, 145) */
}/* 设置显示密码时的样式 */
.showPassword {--bgColor: rgba(0, 0, 0, 0.9);/* 设置背景颜色变量为RGBA(0, 0, 0, 0.9) */--inputColor: white;/* 设置输入框颜色变量为白色 */--border: rgb(255, 255, 255);
}
</style>
