背景模糊式密码强度检测 Password Strength Background
1. 概述
项目本体为一个登录页面, 其中背景的模糊程度会随着用户输入密码的位数增加而减少, 直到模糊叠底完全消失.
效果:
2. 结构和切图
网页的基本结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div class="background" id="background"></div>
<div class="bg-white rounded p-10 text-center shadow-md">
<h1 class="text-3xl">Image Password Strength</h1>
<p class="text-sm text-gray-700">Change the password to see the effect</p>
<div class="my-4 text-left">
<label for="email" class="text-gray-900">Email:</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">Password</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">Submit</button>
</div>
</body>
需要注意此处使用了 tailwind 轻框架在 ClassName 中调用了登录组件中的大部分的样式.
3. 编写 CSS 样式
完整的 CSS 样式表如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {
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('../expanding-cards/avatar1.JPG') no-repeat center center/cover;
position: absolute;
top: -20px;
bottom: -20px;
left: -20px;
right: -20px;
z-index: -1;
filter: blur(20px);
}
4. JavaScript
下面编写用于生成密码的 JavaScript 函数:
1
2
3
4
5
6
7
8
9
const password = document.getElementById('password');
const background = document.getElementById('background');
password.addEventListener('input', (e) => {
const input = e.target.value;
const length = input.length;
const blurValue = 20 - length * 2;
background.style.filter = `blur(${blurValue}px)`;
})
最后, 完整的网页演示可见 此处
