html+css實現漂亮的透明登入頁面

html+css實現漂亮的透明登入頁面，HTML實現炫酷登入頁面 ... 作者：AlbertYang，軟體設計師，Java工程師，前端工程師，愛閱讀，愛思考，愛程式設計，愛自由 ... MdEditor html+css實現漂亮的透明登入頁面，HTML實現炫酷登入頁面 語言:CN/TW/HK 時間 2021-01-1611:01:25 osc_15fvklrg 主題: java 承蒙各位小夥伴的支援，鄙人有幸入圍了《CSDN2020部落格之星》的前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

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(tobottom,#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:025px45pxrgba(0,0,0,0.1); border:1pxsolidrgba(255,255,255,0.5); border-right:1pxsolidrgba(255,255,255,0.2); border-bottom:1pxsolidrgba(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:animate10slinearinfinite; /*動態計算動畫延遲幾秒播放*/ animation-delay:calc(var(--x)*-1s); } /*背景圓動畫*/ @keyframesanimate{ 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:025px45pxrgba(0,0,0,0.1); border:1pxsolidrgba(255,255,255,0.5); border-right:1pxsolidrgba(255,255,255,0.2); border-bottom:1pxsolidrgba(255,255,255,0.2); } .form{ position:relative; width:100%; height:100%; padding:50px; } /*登入標題樣式*/ .formh2{ position:relative; color:#fff; font-size:24px; font-weight:600; letter-spacing:5px; margin-bottom:30px; cursor:pointer; } /*登入標題的下劃線樣式*/ .formh2::before{ content:""; position:absolute; left:0; bottom:-10px; width:0px; height:3px; background:#fff; transition:0.5s; } .formh2:hover:before{ width:53px; } .form.inputBox{ width:100%; margin-top:20px; } /*輸入框樣式*/ .form.inputBoxinput{ width:100%; padding:10px20px; background:rgba(255,255,255,0.2); outline:none; border:none; border-radius:30px; border:1pxsolidrgba(255,255,255,0.5); border-right:1pxsolidrgba(255,255,255,0.2); border-bottom:1pxsolidrgba(255,255,255,0.2); font-size:16px; letter-spacing:1px; color:#fff; box-shadow:05px15pxrgba(0,0,0,0.05); } .form.inputBoxinput::placeholder{ color:#fff; } /*登入按鈕樣式*/ .form.inputBoxinput[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; } .forgeta{ color:#fff; font-weight:600; text-decoration:none; }   今天的學習就到這裡了，由於本人能力和知識有限，如果有寫的不對的地方，還請各位大佬批評指正。

有什麼不明白的地方歡迎給我留言，如果想繼續學習提高，歡迎關注我，每天進步一點點，就是領先的開始，加油。

如果覺得本文對你有幫助的話，歡迎轉發，評論，點贊！！！ 「其他文章」 【Unity】製作一個C#實現的計時器 lululemon最新報告建立全球幸福感基準 為什麼MySQL不推薦使用uuid或者雪花id作為主鍵？ 【論文閱讀】DeiT|Trainingdata-efficientimagetransformers&distillationthroughattention 微控制器C語言程式設計：.H檔案與.C檔案的關係！ RPA如何引領新一輪IT服務升級丨IT領域應用RPA的8大場景 bzoj3124:[Sdoi2013]直徑 VS2019學生版的下載安裝並使用 曾經被生活所迫，我也擺過地攤！ 量子力學與量子計算（1）——熱輻射與普朗克能量子假設 htmlcss實現漂亮的透明登入頁面，HTML實現炫酷登入頁面 【日常排雷】.Netcore生產環境appsetting讀取失敗 保護隱私，規範徵信！劍指芝麻信用？央行這份檔案資訊量很大-知乎 鴻蒙手機經典小遊戲——俄羅斯方塊 量子計算還沒搞懂，光子計算又要來統治世界？ 深度神經網路中的區域性響應歸一化LRN簡介及實現 Markdown 為何tcptimewait需要2MSL 初識C語言1 動態規劃的引入1 「java」 java效能分析--JDK自帶監控工具值jcmd 萬能鑰匙！java執行時載入並執行外部class檔案！ 基於JavaSpringBootvueelement實現傢俱購物銷售網站詳細設計和實現 Window配置JAVA環境 Zadig面向開發者的自測聯調子環境技術方案詳解 openGauss資料庫JDBC環境連線配置(Eclipse) Web前端期末大作業--中國港珠澳大橋網頁設計(HTMLCSSJavaScript)實現 我也曾對Java異常一無所知 高頻面試題-請把Java垃圾回收器說清楚！ 【Codelabs挑戰賽—定製訊息和配置】HarmonyOS定製告白訊息