這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

今天我們來分享一款非常有趣的登錄界面，它使用HTML和CSS制作，具有動態的水波紋效果，讓用戶在登錄時感受到了一股清涼之感，

基本html框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.cnblogs.com/smileZAZ/p/water.css">
    <link rel="stylesheet" href="https://www.cnblogs.com/smileZAZ/p/form.css">
</head>

<body>
    <div >
        <form>
            <p>用戶名<br />
                <input type="text"  placeholder="請輸入用戶名" />
            </p>
            <p>密碼<br />
                <input type="password"  placeholder="請輸入密碼" />
            </p>
            <p>
                <input id="remember" type="checkbox" /><label for="smtxt">記住密碼</label>
            </p>
            <p>
                <input type="submit" value="https://www.cnblogs.com/smileZAZ/p/登錄" />
            </p>
            <p >還沒有賬戶？<a href="https://www.cnblogs.com/smileZAZ/p/#">注冊</a></p>
        </form>
    </div>
</body>
</html>

首先，我們來看HTML代碼，這個登錄界面包含一個表單，用戶需要在表單中輸入用戶名和密碼，我們使用p標簽創建輸入框，并設定class屬性以便后續的CSS樣式設定，此外，我們還在表單中添加了一個“記住密碼”的復選框和一個登錄按鈕，同時還有一個注冊鏈接，

表單樣式

form{            
    opacity: 0.8;
    text-align: center;
    padding: 0px 100px;
    border-radius: 10px;
    margin: 120px auto;
}

p {
  -webkit-text-stroke: 1px #8e87c3;
}

對表單整體進行樣式定義，使其位于水滴內部，p標簽內文鏤空，

.textinput{
    height: 40px;
    font-size: 15px;
    width: 100px;
    padding: 0 35px;
    border: none;
    background: rgba(250, 249, 249, 0.532);
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
    border-radius: 50px;
    -webkit-text-stroke: 0px;
    color: saddlebrown;
    outline-style: none;
}

對輸入框進行樣式定義，取消鏤空字體樣式，取消輪廓線，設定陰影實作水滴一般效果，

input[type="submit"]{
    width: 110px;
    height: 40px;
    text-align: center;
    outline-style: none;
    border-style: none;
    border-radius: 50px;
    background: rgb(31, 209, 218);
    -webkit-text-stroke: 0px;
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}

我們使用了input[type="submit"] 選擇器來選中提交按鈕，并設定了按鈕的大小、文本對齊方式、圓角和背景等樣式，去除了輪廓線，同樣采用了陰影來設定按鈕，使其具有氣泡一般的感覺，并設定背景色，

input[type="submit"]:hover {
    background-color: rgb(31, 218, 78);
}

這段代碼是用來為按鈕添加滑鼠懸停效果的，我們使用了input[type="submit"]:hover選擇器來選中滑鼠懸停在按鈕上時的狀態，并設定了背景顏色，當用戶懸停在按鈕上時，按鈕的背景顏色會改變，非常引人注目，

a {
    text-decoration: none;
    color: rgba(236, 20, 20, 0.433);
    -webkit-text-stroke: 1px;
}

a:hover {
    text-decoration: underline;
}

提交按鈕底部注冊文字樣式，采用鏤空字體樣式，滑鼠移至該元素上方時，添加下劃線，

* {
    margin: 0;
    padding: 0;
}
body {
    background: skyblue;
}

這段代碼是對所有元素的外邊距和內邊距進行清零，以便更好地控制元素的位置和大小，設定了整個頁面的背景顏色為天藍色，

.main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    box-sizing: border-box;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
    animation: move 6s linear infinite;
}

這段代碼采用絕對定位，以便更好地控制它的位置，left: 50%; top: 50%; 將元素的左上角定位在頁面的中心位置，通過transform屬性將元素向左上角移動50%，以便讓元素的中心位置與頁面中心位置重合，設定元素的寬度和高度為400像素，background: transparent; 將元素的背景設定為透明色，box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873); 設定元素的陰影效果，包括內陰影和外陰影，animation: move 6s linear infinite; 為元素添加影片效果，其中move 是影片名稱，6s是影片時長，linear是影片速度曲線，infinite是影片回圈次數，

.main::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background: rgba(254, 254, 254, 0.667);
    left: 80px;
    top: 80px;
    border-radius: 50%;
    animation: move2 6s linear infinite;
    filter:blur(1px);
}

.main::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    left: 130px;
    top: 70px;
    border-radius: 50%;
    animation: move3 6s linear infinite;
    filter:blur(1px);
}

這段代碼是對兩個小球進行樣式定義，將偽元素的定位方式設定為絕對定位，以便更好地控制它的位置，設定偽元素的寬度和高度一個為20px,一個為40px，設定偽元素的背景顏色為半透明白色，left,top 設定偽元素的左上角定位在主體元素的中心位置，設定偽元素的邊框半徑為50%，以便將其設定為圓形，animation: move2 6slinear infinite; 為偽元素添加影片效果，其中 move2 是影片名稱，6s 是影片時長，linear 是影片速度曲線，infinite 是影片回圈次數,另一個偽元素同理，接下來是影片定義：

@keyframes move {
    50% {
        border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
    }
    75% {
        border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%  ;
    }
    25% {
        border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%  ;
    }
}

@keyframes move2 {
    25% {
        left: 80px;
        top: 110px;
    }
    50% {
        left: 50px;
        top: 80px;
    }
    75% {
        left: 80px;
        top: 120px;
    }
}

@keyframes move3 {
    25% {
        left: 100px;
        top: 90px;
    }
    50% {
        left: 110px;
        top: 75px;
    }
    75% {
        left: 130px;
        top: 100px;
    }
}

這段代碼定義了三個不同的影片，分別是move、move2和move3，move影片，它控制了元素的邊框半徑在不同時間點的變化，在這個影片中，元素的邊框半徑分別在25%、50%和75%的時間點進行了變化，move2和move3影片，控制了一個偽元素的位置在不同時間點的變化，在這個影片中，偽元素的位置分別在25%、50%和75%的時間點進行了變化，

總代碼

HTML部分

<div >
        <form>
            <p>用戶名<br />
                <input type="text"  placeholder="請輸入用戶名" />
            </p>
            <p>密碼<br />
                <input type="password"  placeholder="請輸入密碼" />
            </p>
            <p>
                <input id="remember" type="checkbox" /><label for="remember">記住密碼</label>
            </p>
            <p>
                <input type="submit" value="https://www.cnblogs.com/smileZAZ/p/登錄" />
            </p>
            <p >還沒有賬戶？<a href="https://www.cnblogs.com/smileZAZ/p/#">注冊</a></p>
        </form>
    </div>

CSS部分

* {
    margin: 0;
    padding: 0;
}

body {
    background: skyblue;
}

.main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    box-sizing: border-box;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
    animation: move 6s linear infinite;
}

.main::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background: rgba(254, 254, 254, 0.667);
    left: 80px;
    top: 80px;
    border-radius: 50%;
    animation: move2 6s linear infinite;
    filter:blur(1px);
}

.main::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    left: 130px;
    top: 70px;
    border-radius: 50%;
    animation: move3 6s linear infinite;
    filter:blur(1px);
}
@keyframes move {
    50% {
        border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
    }
    75% {
        border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%  ;
    }
    25% {
        border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%  ;
    }
}

@keyframes move2 {
    25% {
        left: 80px;
        top: 110px;
    }
    50% {
        left: 50px;
        top: 80px;
    }
    75% {
        left: 80px;
        top: 120px;
    }
}

@keyframes move3 {
    25% {
        left: 100px;
        top: 90px;
    }
    50% {
        left: 110px;
        top: 75px;
    }
    75% {
        left: 130px;
        top: 100px;
    }
}
form{            
    opacity: 0.8;
    text-align: center;
    padding: 0px 100px;
    border-radius: 10px;
    margin: 120px auto;
}

p {
  -webkit-text-stroke: 1px #8e87c3;
}

.textinput{
    height: 40px;
    font-size: 15px;
    width: 100px;
    padding: 0 35px;
    border: none;
    background: rgba(250, 249, 249, 0.532);
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
    border-radius: 50px;
    -webkit-text-stroke: 0px;
    color: saddlebrown;
    outline-style: none;
}

input[type="submit"]{
    width: 110px;
    height: 40px;
    text-align: center;
    outline-style: none;
    border-style: none;
    border-radius: 50px;
    background: rgb(31, 209, 218);
    -webkit-text-stroke: 0px;
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}
input[type="submit"]:hover {
    background-color: rgb(31, 218, 78);
}

a {
    text-decoration: none;
    color: rgba(236, 20, 20, 0.433);
    -webkit-text-stroke: 1px;
}

a:hover {
    text-decoration: underline;
}

本文轉載于:

https://juejin.cn/post/7225623397144199228

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

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

標籤：Html/Css

上一篇：20230514學習筆記——將代碼提交到碼云中

下一篇：返回列表

記錄--css水滴登錄界面