HTML+CSS+JS：花瓣登录组件

效果演示

实现了一个具有动态花朵背景和简洁登录框的登录页面效果。

Code

<section>
    <img src="./img/background.jpeg" class="background">

    <div class="login">
        <h2>Sign Inh2>
        <div class="inputBox">
            <input type="text" placeholder="Username">
        div>
        <div class="inputBox" id="pass">
            <input type="password" placeholder="Password">
            <i class="iconfont icon-see">i>
            <i class="iconfont icon-nosee">i>
        div>
        <div class="inputBox">
            <input type="submit" value="Login" id="btn">
        div>
        <div class="group">
            <a href="#">Forget Passworda>
            <a href="#">Sign upa>
        div>
    div>

    <div class="flower">
        <img src="./img/flower.png">
        <img src="./img/flower.png">
        <img src="./img/flower.png">
        <img src="./img/flower.png">
        <img src="./img/flower.png">
        <img src="./img/flower.png">
        <img src="./img/flower.png">
        <img src="./img/flower.png">
    div>
section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

* {
    margin: 0; /* 设置所有元素的外边距为0 */
    padding: 0; /* 设置所有元素的内边距为0 */
    box-sizing: border-box; /* 设置盒模型为border-box，包括边框在内的尺寸都包含在内 */
    font-family: 'Poppins', sans-serif; /* 设置全局字体为Poppins和sans-serif备用字体 */
}

section {
    position: relative; /* 设置section元素相对定位 */
    width: 100%; /* 设置宽度为100% */
    height: 100vh; /* 设置高度为视口高度 */
    display: flex; /* 设置为弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow-x: hidden; /* 水平溢出隐藏 */
}

section .bg {
    position: absolute; /* 设置背景图片绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    object-fit: cover; /* 图片填充整个容器 */
}

/* 登录框样式 */
.login {
    position: relative; /* 设置登录框相对定位 */
    width: 500px; /* 宽度500px */
    min-height: 300px; /* 最小高度300px */
    padding: 60px; /* 内边距60px */
    border-radius: 20px; /* 边框圆角20px */
    background: rgba(255, 255, 255, 0.25); /* 背景颜色为白色透明度0.25 */
    backdrop-filter: blur(3px); /* 背景模糊效果 */
    display: flex; /* 设置为弹性布局 */
    flex-direction: column; /* 垂直方向排列 */
    gap: 20px; /* 元素之间的间距为20px */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); /* 设置阴影效果 */
}

.login h2 {
    position: relative; /* 设置标题相对定位 */
    width: 100%; /* 宽度100% */
    text-align: center; /* 文本居中 */
    font-size: 2.5em; /* 字体大小2.5em */
    font-weight: 600; /* 字体粗细600 */
    color: #8f2c24; /* 字体颜色 */
    margin-bottom: 10px; /* 底部外边距10px */
}

/* 输入框样式 */
.login .inputBox {
    position: relative; /* 设置输入框相对定位 */
}

.login .inputBox input {
    position: relative; /* 设置输入框相对定位 */
    width: 100%; /* 宽度100% */
    padding: 15px 20px; /* 内边距 */
    outline: none; /* 去除默认轮廓 */
    font-size: 1.25em; /* 字体大小1.25em */
    color: #8f2c24; /* 字体颜色 */
    border-radius: 5px; /* 边框圆角5px */
    background: #fff; /* 背景颜色为白色 */
    border: none; /* 去除边框 */
    margin-bottom: 30px; /* 底部外边距30px */
}

.login .inputBox ::placeholder {
    color: #8f2c24; /* 输入框占位符颜色 */
}

.login .inputBox #btn {
    position: relative; /* 设置按钮相对定位 */
    border: none; /* 去除边框 */
    outline: none; /* 去除默认轮廓 */
    background: #8f2c24; /* 背景颜色 */
    color: #fff; /* 字体颜色 */
    cursor: pointer; /* 鼠标指针样式为手型 */
    font-size: 1.25em; /* 字体大小1.25em */
    font-weight: 500; /* 字体粗细500 */
}

.login .group {
    display: flex; /* 设置为弹性布局 */
    justify-content: space-between; /* 两端对齐 */
}

.login .group a {
    font-size: 1.25em; /* 字体大小1.25em */
    color: #8f2c24; /* 字体颜色 */
    font-weight: 500; /* 字体粗细500 */
    text-decoration: none; /* 去除下划线 */
}

/* 花朵动画效果 */
.flower {
    position: absolute; /* 设置花朵绝对定位 */
    width: 100%; /* 宽度100% */
    height: 100vh; /* 高度100vh */
    overflow: hidden; /* 溢出隐藏 */
    z-index: 1; /* 设置层级 */
    pointer-events: none; /* 禁止鼠标事件 */
}

.flower img {
    position: absolute; /* 设置花朵图片绝对定位 */
}

/* 花朵动画关键帧 */
@keyframes animate {
    0% {
        opacity: 0;
        top: -10px;
        transform: translateX(20px) rotate(0deg);
    }
    /* 其他关键帧省略，实现花朵飘落效果 */
}

/* 不同花朵的位置和动画速度 */
.flower img:nth-child(1) {
    left: 20%;
    animation: animate 20s linear infinite;
}

/* 其他花朵样式设置类似 */

/* 密码显示/隐藏图标样式 */
.login .inputBox i {
    position: absolute; /* 设置图标绝对定位 */
    right: 15px; /* 右侧定位 */
    top: 15px; /* 顶部定位 */
    font-size: 28px; /* 字体大小28px */
    color: #8f2c24; /* 图标颜色 */
    cursor: pointer; /* 鼠标指针样式为手型 */
}

.login .inputBox .icon-see {
    display: block; /* 显示图标 */
}

.login .inputBox .icon-nosee {
    display: none; /* 隐藏图标 */
}

.login .inputBox.see .icon-see {
    display: none; /* 隐藏显示图标 */
}

.login .inputBox.see .icon-nosee {
    display: block; /* 显示隐藏图标 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

const pass = document.querySelector('#pass')
const see = document.querySelector('.icon-see')
const noSee = document.querySelector('.icon-nosee')
const inp = document.querySelector('#pass input')

see.addEventListener('click', function () {
  pass.classList.add('see')
  inp.type = 'text'
})

noSee.addEventListener('click', function () {
  pass.classList.remove('see')
  inp.type = 'password'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

实现思路拆分

1. 页面整体样式设置，包括重置默认样式、设置字体、设置section样式等。
2. 登录框的样式设置，包括背景、边框、阴影、输入框样式等。
3. 登录框中包含一个标题（h2元素）、输入框（input元素）、登录按钮（button元素）、以及一个显示/隐藏密码的图标。
4. 登录框中的输入框包含用户名和密码输入框，以及一个显示/隐藏密码的功能。
5. 登录框下方有一个包含两个链接的组，用于忘记密码和注册新账号。
6. 页面中还包含了花朵飘落的动画效果，通过keyframes实现花朵的飘落动画，每朵花的位置和动画速度略有不同。