前端切图学习-背景模糊式密码强度检测

Password Strength Background

Posted by R1NG on September 1, 2021 Viewed Times

背景模糊式密码强度检测 Password Strength Background

1. 概述

项目本体为一个登录页面, 其中背景的模糊程度会随着用户输入密码的位数增加而减少, 直到模糊叠底完全消失.

效果:

20210903225316


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)`;
})

最后, 完整的网页演示可见 此处