效果演示

實(shí)現(xiàn)了一個(gè)具有動(dòng)態(tài)花朵背景和簡(jiǎn)潔登錄框的登錄頁(yè)面效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-837001.html

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; /* 設(shè)置所有元素的外邊距為0 */
    padding: 0; /* 設(shè)置所有元素的內(nèi)邊距為0 */
    box-sizing: border-box; /* 設(shè)置盒模型為border-box，包括邊框在內(nèi)的尺寸都包含在內(nèi) */
    font-family: 'Poppins', sans-serif; /* 設(shè)置全局字體為Poppins和sans-serif備用字體 */
}

section {
    position: relative; /* 設(shè)置section元素相對(duì)定位 */
    width: 100%; /* 設(shè)置寬度為100% */
    height: 100vh; /* 設(shè)置高度為視口高度 */
    display: flex; /* 設(shè)置為彈性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow-x: hidden; /* 水平溢出隱藏 */
}

section .bg {
    position: absolute; /* 設(shè)置背景圖片絕對(duì)定位 */
    top: 0; /* 頂部對(duì)齊 */
    left: 0; /* 左側(cè)對(duì)齊 */
    width: 100%; /* 寬度100% */
    height: 100%; /* 高度100% */
    object-fit: cover; /* 圖片填充整個(gè)容器 */
}

/* 登錄框樣式 */
.login {
    position: relative; /* 設(shè)置登錄框相對(duì)定位 */
    width: 500px; /* 寬度500px */
    min-height: 300px; /* 最小高度300px */
    padding: 60px; /* 內(nèi)邊距60px */
    border-radius: 20px; /* 邊框圓角20px */
    background: rgba(255, 255, 255, 0.25); /* 背景顏色為白色透明度0.25 */
    backdrop-filter: blur(3px); /* 背景模糊效果 */
    display: flex; /* 設(shè)置為彈性布局 */
    flex-direction: column; /* 垂直方向排列 */
    gap: 20px; /* 元素之間的間距為20px */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); /* 設(shè)置陰影效果 */
}

.login h2 {
    position: relative; /* 設(shè)置標(biāo)題相對(duì)定位 */
    width: 100%; /* 寬度100% */
    text-align: center; /* 文本居中 */
    font-size: 2.5em; /* 字體大小2.5em */
    font-weight: 600; /* 字體粗細(xì)600 */
    color: #8f2c24; /* 字體顏色 */
    margin-bottom: 10px; /* 底部外邊距10px */
}

/* 輸入框樣式 */
.login .inputBox {
    position: relative; /* 設(shè)置輸入框相對(duì)定位 */
}

.login .inputBox input {
    position: relative; /* 設(shè)置輸入框相對(duì)定位 */
    width: 100%; /* 寬度100% */
    padding: 15px 20px; /* 內(nèi)邊距 */
    outline: none; /* 去除默認(rèn)輪廓 */
    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; /* 設(shè)置按鈕相對(duì)定位 */
    border: none; /* 去除邊框 */
    outline: none; /* 去除默認(rèn)輪廓 */
    background: #8f2c24; /* 背景顏色 */
    color: #fff; /* 字體顏色 */
    cursor: pointer; /* 鼠標(biāo)指針樣式為手型 */
    font-size: 1.25em; /* 字體大小1.25em */
    font-weight: 500; /* 字體粗細(xì)500 */
}

.login .group {
    display: flex; /* 設(shè)置為彈性布局 */
    justify-content: space-between; /* 兩端對(duì)齊 */
}

.login .group a {
    font-size: 1.25em; /* 字體大小1.25em */
    color: #8f2c24; /* 字體顏色 */
    font-weight: 500; /* 字體粗細(xì)500 */
    text-decoration: none; /* 去除下劃線 */
}

/* 花朵動(dòng)畫效果 */
.flower {
    position: absolute; /* 設(shè)置花朵絕對(duì)定位 */
    width: 100%; /* 寬度100% */
    height: 100vh; /* 高度100vh */
    overflow: hidden; /* 溢出隱藏 */
    z-index: 1; /* 設(shè)置層級(jí) */
    pointer-events: none; /* 禁止鼠標(biāo)事件 */
}

.flower img {
    position: absolute; /* 設(shè)置花朵圖片絕對(duì)定位 */
}

/* 花朵動(dòng)畫關(guān)鍵幀 */
@keyframes animate {
    0% {
        opacity: 0;
        top: -10px;
        transform: translateX(20px) rotate(0deg);
    }
    /* 其他關(guān)鍵幀省略，實(shí)現(xiàn)花朵飄落效果 */
}

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

/* 其他花朵樣式設(shè)置類似 */

/* 密碼顯示/隱藏圖標(biāo)樣式 */
.login .inputBox i {
    position: absolute; /* 設(shè)置圖標(biāo)絕對(duì)定位 */
    right: 15px; /* 右側(cè)定位 */
    top: 15px; /* 頂部定位 */
    font-size: 28px; /* 字體大小28px */
    color: #8f2c24; /* 圖標(biāo)顏色 */
    cursor: pointer; /* 鼠標(biāo)指針樣式為手型 */
}

.login .inputBox .icon-see {
    display: block; /* 顯示圖標(biāo) */
}

.login .inputBox .icon-nosee {
    display: none; /* 隱藏圖標(biāo) */
}

.login .inputBox.see .icon-see {
    display: none; /* 隱藏顯示圖標(biāo) */
}

.login .inputBox.see .icon-nosee {
    display: block; /* 顯示隱藏圖標(biāo) */
}

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'
})

實(shí)現(xiàn)思路拆分

1. 頁(yè)面整體樣式設(shè)置，包括重置默認(rèn)樣式、設(shè)置字體、設(shè)置section樣式等。
2. 登錄框的樣式設(shè)置，包括背景、邊框、陰影、輸入框樣式等。
3. 登錄框中包含一個(gè)標(biāo)題（h2元素）、輸入框（input元素）、登錄按鈕（button元素）、以及一個(gè)顯示/隱藏密碼的圖標(biāo)。
4. 登錄框中的輸入框包含用戶名和密碼輸入框，以及一個(gè)顯示/隱藏密碼的功能。
5. 登錄框下方有一個(gè)包含兩個(gè)鏈接的組，用于忘記密碼和注冊(cè)新賬號(hào)。
6. 頁(yè)面中還包含了花朵飄落的動(dòng)畫效果，通過keyframes實(shí)現(xiàn)花朵的飄落動(dòng)畫，每朵花的位置和動(dòng)畫速度略有不同。

到了這里，關(guān)于HTML+CSS+JS：花瓣登錄組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！