html+css實作漂亮的透明登錄頁面，HTML實作炫酷登錄頁面-有解無憂

承蒙各位小伙伴的支持，鄙人有幸入圍了《CSDN 2020博客之星》的前200名，現在進入投票環節，如果我平時寫的文章和分享對你有用的話，請每天點擊一下這個鏈接，投上你們寶貴的一票吧！謝謝！?? 每一票都是我堅持的動力和力量！ https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743

作者：AlbertYang，軟體設計師，Java工程師，前端工程師，愛閱讀，愛思考，愛編程，愛自由，信奉終生學習，每天學習一點點，就是領先的開始，

微信公眾號：AlbertYang 關注我更多精彩等你來發現！

今天帶大家，用html+css實作一個漂亮的登錄頁面，代碼中關鍵部分我都做了注釋，具體實作程序請看下面的視頻和代碼，

視頻

視頻地址：https://www.bilibili.com/video/BV16A411H7Vm

html+css實作漂亮的透明登錄頁面，HTML炫酷登錄頁面

視頻錄的比較急，視頻的最后背景圓樣式那里少加了一個border-radius: 50%;，導致沒有變成圓形，而是正方形，在下面的代碼中已更正，

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>登錄:微信公眾號AlbertYang</title>
</head>

<body>
    <section>
        <!-- 背景顏色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圓 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登錄框 -->
            <div class="container">
                <div class="form">
                    <h2>登錄</h2>
                    <form>
                        <div class="inputBox">
                            <input type="text" placeholder="姓名">

                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="密碼">

                        </div>
                        <div class="inputBox">
                            <input type="submit" value="登錄">

                        </div>
                        <p class="forget">忘記密碼?<a href="#">
                                點擊這里
                            </a></p>
                        <p class="forget">沒有賬戶?<a href="#">
                                注冊
                            </a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS

/* 清除瀏覽器默認邊距，
使邊框和內邊距的值包含在元素的width和height內 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 使用flex布局，讓內容垂直和水平居中 */

section {
    /* 相對定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函式用于創建一個表示兩種或多種顏色線性漸變的圖片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

/* 背景顏色 */

section .color {
    /* 絕對定位 */
    position: absolute;
    /* 使用filter(濾鏡) 屬性，給影像設定高斯模糊*/
    filter: blur(200px);
}

/* :nth-child(n) 選擇器匹配父元素中的第 n 個子元素 */

section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}

.box {
    position: relative;
}

/* 背景圓樣式 */

.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter屬性為一個元素后面區域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(濾鏡) 屬性，改變顏色，
    hue-rotate(deg)  給影像應用色相旋轉 
    calc() 函式用于動態計算長度值 
    var() 函式呼叫自定義的CSS屬性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 呼叫影片animate，需要10s完成影片，
    linear表示影片從頭到尾的速度是相同的，
    infinite指定影片應該回圈播放無限次*/
    animation: animate 10s linear infinite;
    /* 動態計算影片延遲幾秒播放 */
    animation-delay: calc(var(--x) * -1s);
}

/* 背景圓影片 */

@keyframes animate {
    0%, 100%, {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}

.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}

.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}

/* 登錄框樣式 */

.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}

/* 登錄標題樣式 */

.form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}

/* 登錄標題的下劃線樣式 */

.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}

.form h2:hover:before {
    width: 53px;
}

.form .inputBox {
    width: 100%;
    margin-top: 20px;
}

/* 輸入框樣式 */

.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form .inputBox input::placeholder {
    color: #fff;
}

/* 登錄按鈕樣式 */

.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}

.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}

.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

今天的學習就到這里了，由于本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正，有什么不明白的地方歡迎給我留言，如果想繼續學習提高，歡迎關注我，每天進步一點點，就是領先的開始，加油，如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249088.html

標籤：其他

上一篇：Web基本筆記~11.函式和記憶體問題

下一篇：tomcat埠少了一個