記錄--css水滴登錄界面

来源:https://www.cnblogs.com/smileZAZ/archive/2023/05/15/17402747.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 今天我們來分享一款非常有趣的登錄界面，它使用HTML和CSS製作，具有動態的水波紋效果，讓用戶在登錄時感受到了一股清涼之感。 基本html框架 <!DOCTYPE html> <html lang="en"> <head> <met ...


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

前言

今天我們來分享一款非常有趣的登錄界面，它使用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="water.css">
    <link rel="stylesheet" href="form.css">
</head>

<body>
    <div class="main">
        <form>
            <p>用戶名<br />
                <input type="text" class="textinput" placeholder="請輸入用戶名" />
            </p>
            <p>密碼<br />
                <input type="password" class="textinput" placeholder="請輸入密碼" />
            </p>
            <p>
                <input id="remember" type="checkbox" /><label for="smtxt">記住密碼</label>
            </p>
            <p>
                <input type="submit" value="登錄" />
            </p>
            <p class="txt">還沒有賬戶？<a href="#">註冊</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 class="main">
        <form>
            <p>用戶名<br />
                <input type="text" class="textinput" placeholder="請輸入用戶名" />
            </p>
            <p>密碼<br />
                <input type="password" class="textinput" placeholder="請輸入密碼" />
            </p>
            <p>
                <input id="remember" type="checkbox" /><label for="remember">記住密碼</label>
            </p>
            <p>
                <input type="submit" value="登錄" />
            </p>
            <p class="txt">還沒有賬戶？<a href="#">註冊</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

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 06~12-Esp8266物聯網晶元的使用（一）-part02/03-ESP8266開發環境、編程舉例
    上一章主要作了晶元介紹，這一章主要作對開發環境的介紹。 認識Arduino Arduino是一款便捷靈活、方便上手的開源電子原型平臺。包含硬體（各種型號的Arduino板）和軟體（ArduinoIDE）。它構建於開放原始碼simple I/O介面版，並且具有使用類似Java、C語言的Processi ...
  • Redis數據結構二之SDS和雙向鏈表
    本文首發於公眾號：Hunter後端 原文鏈接：Redis數據結構二之SDS和雙向鏈表 這一篇筆記介紹一下 SDS（simple dynamic string）和雙向鏈表。 以下是本篇筆記目錄： SDS 常數複雜度獲取字元串長度 杜絕緩衝區溢出 減少修改字元串帶來的記憶體重分配次數 二進位安全 相容C字 ...
  • Apache Arrow DataFusion原理與架構
    本篇主要介紹了一種使用Rust語言編寫的查詢引擎——DataFusion，其使用了基於Arrow格式的記憶體模型，結合Rust語言本身的優勢，達成了非常優秀的性能指標 DataFusion是一個查詢引擎而非資料庫，因此其本身不具備存儲數據的能力。但正因為不依賴底層存儲的格式，使其成為了一個靈活可擴展的 ...
  • MySQL的varchar存儲原理：InnoDB記錄存儲結構
    摘要：varchar(M) 能存多少個字元，為什麼提示最大16383？innodb怎麼知道varchar真正有多長？記錄為NULL，innodb如何處理？某個列數據占用的位元組數非常多怎麼辦？影響每行實際可用空間的因素有哪些？本篇圍繞innodb預設行格式dynamic來說說原理。 本文分享自華為雲社 ...
  • 架構師日記-從資料庫發展歷程到數據結構設計探析
    本文針對數據存儲相關名詞概念進行瞭解釋，重點介紹了資料庫技術的發展史。為了豐富文章的可讀性以及實用性，又從數據結構設計層面進行了部分技術實戰能力的外延擴展，闡述了拉鏈表，位運算，環形隊列等相關數據結構在軟體開發領域的應用，希望本文給你帶來收穫。 ...
  • MySQL 存儲過程&觸發器&事務
    存儲過程 概念 存儲過程（Stored Procedure），是為了完成特定功能的SQL語句集。 優點 存儲過程可以理解為shell腳本這類型的命令集輸出工具，但是在底層，存儲過程擁有更多的優點： ==語言的靈活性跟功能性更強==，在原有基礎之上可以插入控制語句、迴圈語句等讓SQL語句的功能更強，能 ...
  • nodejs 入門基本概念
    nodejs 的誕生 Node.js 是2009的時候由大神 Ryan Dahl 開發的。Ryan 的本職工作是用 C++ 寫伺服器，後來他總結出一個經驗，一個高性能伺服器應該是滿足“事件驅動，非阻塞 I/O”模型的。C++ 開發起來比較麻煩，於是 Ryan 就想找一種更高級的語言，以便快速開發。 ...
  • Node 調試利器，前端、Node 開發必備 - VSCode JS Debug Terminal
    經常看到有同學抱怨 Node 調試麻煩或者是搞不清怎麼調試各種腳本、Jest、Webpack 等等，而偶爾看到的調試相關的文章又全都是在寫 inspect、launch.json 這些方案，其實有一定學習成本。 而其實在 VSCode 中早已內置了相當無腦的 Debug 方式，就是 JavaScri ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類