CSS之花瓣登录组件

效果演示

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

Code

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

    <div class="login">
        <h2>Sign In</h2>
        <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 Password</a>
            <a href="#">Sign up</a>
        </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>

* {
    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; /* 显示隐藏图标 */
}

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. 页面整体样式设置，包括重置默认样式、设置字体、设置section样式等。

2. 登录框的样式设置，包括背景、边框、阴影、输入框样式等。

3. 登录框中包含一个标题（h2元素）、输入框（input元素）、登录按钮（button元素）、以及一个显示/隐藏密码的图标。

4. 登录框中的输入框包含用户名和密码输入框，以及一个显示/隐藏密码的功能。

5. 登录框下方有一个包含两个链接的组，用于忘记密码和注册新账号。

6. 页面中还包含了花朵飘落的动画效果，通过keyframes实现花朵的飘落动画，每朵花的位置和动画速度略有不同。