九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

1.效果圖：

HTML代碼：

Document

Login

Login

Don't have account? Sign up

2.效果圖：

HTML代碼：

Document

LOGIN

登錄

3.效果圖：

HTML代碼：

Document

登錄

忘記密碼

注冊

提交

4.效果圖：

HTML代碼：

Document

login

userName

passwordsubmit

5.效果圖：

HTML代碼：

Document

Sign UpSign Up

Sign InForgot your password? Sign In

Sign In

Sign Up

6.效果圖：

HTML代碼：

Document        

用戶登錄              

用戶名 *                                             

密碼 *                                                      

沒有賬號？          

立即注冊加入我們吧，和我們一起開啟旅程吧                      注冊                              

7.效果圖：

HTML部分：

登錄

賬號：

密碼：

忘記密碼注冊

CSS部分：

/*設置底色*/*{  margin: 0;  padding: 0;  font-size: 黑體;  box-sizing: border-box;}body{  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #222;}/*設置登錄盒子的大小和底色*/.box{  position:relative;  width: 380px;  height: 420px;  background: #1c1c1c;  border-radius: 8px;}/*開啟flex布局，換軸*/.box form{  position:absolute;  inset:4px;  background: #222;  padding: 50px 40px;  border-radius: 8px;  z-index: 2;  display: flex;  flex-direction: column;}/*標題文字樣式，輸入框盒子大小間距*/.box form h2{  color: #fff;  font-weight: 500;  text-align: center;  letter-spacing: 0.lem;}.box form .inputBox{  position: relative;  width: 300px;  margin-top: 35px;}/*調整輸入框樣式*/.box form .inputBox input{  position: relative;  width: 100%;  padding: 20px 10px 10px;  background: transparent;  outline: none;  border: none;  box-shadow: none;  color: #23242;  font-size: 1em;  letter-spacing: 0.05em;  z-index: 10;}/*提示文字樣式*/.box form .inputBox span{  position: absolute;  left: 0;  padding: 20px 0px 10px;  pointer-events: none;  color: #8f8f8f;  font-size: 1em;  letter-spacing: 0.05em;}/*輸入有效值獲取焦點時樣式*/.box form .inputBox input{  transition: 0.5s;}.box form .inputBox span{  transition: 0.5s;}.box form .inputBox input:valid~span,.box form .inputBox input:focus~span{  color: #fff;  font-size: 0.75em;  transform: translateY(-34px);}/*設置白色下劃線，并設置點擊穿透*/.box form .inputBox i{  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 2px;  background: #fff;  border-radius: 4px;  overflow: hidden;  transition: 0.5s;  pointer-events: none;}/*輸入有效值獲取焦點時樣式*/.box form .inputBox input:valid~i,.box form .inputBox input:focus~i{  height: 44px;}/*開啟flex a鏈接樣式*/.box form .links{  display: flex;  justify-content: space-between;}.box form .links a{  margin: 10px 0;  font-size: 0.75em;  color: #8f8f8f;  text-decoration: none;}/*a鏈接hover時改顏色，注冊直接改顏色*/.box form .links a:hover,.box form .links a:nth-child(2){  color: #fff;}/*修改登錄按鈕樣式*/.box form input[type='submit']{  border: none;  outline: none;  padding: 9px 25px;  background: #fff;  cursor: pointer;  font-size: 0.9em;  border-radius: 4px;  font-weight: 600;  width: 100px;  margin-top: 10px;}/*登錄按鈕點擊時，透明度80%*/.box form input[type='submit']:active{  opacity: 0.8;}/*寫動畫*/.borderLine{  position: absolute;  top:0;  inset:0;}@keyframes animate{  0%{    transform: rotate(0deg);  }  100%{    transform: rotate(360deg);  }}/*添加動畫*/.box::before,.box::after,.borderLine::before,.borderLine::after{  content: '';  position: absolute;  top:-50%;  width: 380px;  height: 420px;  background:linear-gradient(  0deg,transparent,transparent,  #45f3ff,#45f3ff,#45f3ff);  z-index: 1;  transform-origin: bottom right;  animation: animate 6s linear infinite;}/*添加動畫延遲，修改為兩種顏色*/.box::after{  animation-delay: -3s;}.borderLine::before{  background: linear-gradient(  0deg,transparent,transparent,  #ff2770,#ff2770,#ff2770);  animation-delay: -1.5s;}.borderLine::after{  background: linear-gradient(  0deg,transparent,transparent,  #ff2770,#ff2770,#ff2770);  animation-delay: -4.5s;}/*退出隱藏*/.box{  overflow: hidden;}

8.效果圖：

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() 函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片 */ 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屬性為一個元素后面區(qū)域添加模糊效果 */ 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() 函數(shù)用于動態(tài)計算長度值 var() 函數(shù)調用自定義的CSS屬性值x*/ filter: hue-rotate(calc(var(--x) * 70deg)); /* 調用動畫animate，需要10s完成動畫， linear表示動畫從頭到尾的速度是相同的， infinite指定動畫應該循環(huán)播放無限次*/ animation: animate 10s linear infinite; /* 動態(tài)計算動畫延遲幾秒播放 */ 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;}