<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#87ceeb, #00bfff)
}
.card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 16rem;
padding: 1.6rem;
background: rgb(255 255 255 / 39%);
border-radius: 1.6rem;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.input {
padding: .6rem;
width: 100%;
height: 2.5rem;
margin-bottom: 1.23rem;
border-radius: .6rem;
background: #fff0;
border: 0;
outline: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
input:focus {
border: 1px solid #fff;
}
.input-container {
position: relative;
width: 100%;
}
.eye {
position: absolute;
top: 23%;
right: 5%;
width: 6%;
cursor: pointer;
}
.button {
width: 100%;
padding: .3rem;
border-radius: 1rem;
background: linear-gradient(270deg, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 80%);
background-size: 200% 100%;
border: 1px solid transparent;
animation: background-animation 1.2s cubic-bezier(0.55, 0, 0.35, 1) infinite alternate;
}
.button:hover {
opacity: 0.6;
border-color: #fff;
}
@keyframes background-animation {
0% {
background-position: 0 0
}
100% {
background-position: 100% 0
}
}
</style>
<div class="card">
<img src="1.jpg" style="border-radius: 2rem; width: 66px;"><br>
<input class="input" placeholder="用户名">
<div class="input-container">
<input class="input" type="password" id="password" placeholder="填写密码">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="eye" id="eye">
<path
    d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
</svg>
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="eye" id="eye2"
style="display: none;">
<path
    d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
<path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</div>
<button class="button" style="display: flex; align-items: center; justify-content: center; font-size: 1rem;">登录
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"
style="width: 16px; margin-left: 6px;">
<path stroke-linecap="round" stroke-linejoin="round"
    d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
</svg>
</button>
</div>
<script>
const passwordField = document.getElementById('password');
const eyeOffIcon = document.getElementById('eye');
const eyeOnIcon = document.getElementById('eye2');
eyeOnIcon.addEventListener('click', () => {
passwordField.type = 'password';
eyeOnIcon.style.display = 'none';
eyeOffIcon.style.display = 'block';
});
eyeOffIcon.addEventListener('click', () => {
passwordField.type = 'text';
eyeOffIcon.style.display = 'none';
eyeOnIcon.style.display = 'block';
});
</script>