50 天学习 50 个项目 - HTMLCSS and JavaScript
day39-Password Strength Background(密码强度背景)
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3fcd1aa8131a08e0ac97a14b84db3ce4.png)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Strength Backround</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"
integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="background" id="background"></div>
<div class="bg-white rounded p-10 text-center shadow-md">
<h1 class="text-3xl">图片密码强度</h1>
<p class="text-sm text-gray-700">改变密码看看效果如何</p>
<div class="my-4 text-left">
<label for="email" class="text-gray-900">邮箱:</label>
<input type="text" class="border block w-full p-2 mt-2 rounded" id="email" placeholder="Enter Email" />
</div>
<div class="my-4 text-left">
<label for="email" class="text-gray-900">密码:</label>
<input type="password" class="border block w-full p-2 mt-2 rounded" id="password"
placeholder="Enter Password" />
</div>
<button class="bg-black text-white py-2 mt-4 inline-block w-full rounded" type="submit">
提交
</button>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.background {
background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b') no-repeat center center/cover;
position: absolute;
top: -20px;
bottom: -20px;
left: -20px;
right: -20px;
z-index: -1;
filter: blur(20px);
}
script.js
const password = document.getElementById('password')
const background = document.getElementById('background')
password.addEventListener('input', (e) => {
const length = e.target.value.length
const blurValue = 20 - length * 2
background.style.filter = `blur(${blurValue}px)`
})