长沙市建设发展集团有限公司网站,.net 网站开发实例,网站优化计划书,营销型网站建设汽车简介
本文展示了一个炫酷的登录页面设计#xff0c;采用HTML和CSS实现。
页面具有以下特点#xff1a;
动态圆形背景效果#xff0c;由50个旋转的彩色线条构成#xff1b;居中显示的登录表单#xff0c;包含邮箱、密码输入框和忘记密码链接#xff1b;输入框的浮动标签…简介
本文展示了一个炫酷的登录页面设计采用HTML和CSS实现。
页面具有以下特点
动态圆形背景效果由50个旋转的彩色线条构成居中显示的登录表单包含邮箱、密码输入框和忘记密码链接输入框的浮动标签特效当输入内容时标签会优雅地上移整体采用深色主题搭配青色(#0ef)高亮元素。
CSS动画和过渡效果增强了交互体验实现了一个现代感十足的登录界面。
展示 代码
HTML
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge/metameta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefstyle.css
/headbodydiv classcontainerdiv classlogin-boxh2Login/h2form action#div classinput-boxinput typeemail requiredlabelEmail/label/divdiv classinput-boxinput typepassword requiredlabelPassword/label/divdiv classforgot-passa href#Forgot your Password?/a/divbutton typesubmit classbtnLogin/buttondiv classsignup-linka href#Signup/a/div/form/divspan style--i:0;/spanspan style--i:1;/spanspan style--i:2;/spanspan style--i:3;/spanspan style--i:4;/spanspan style--i:5;/spanspan style--i:6;/spanspan style--i:7;/spanspan style--i:8;/spanspan style--i:9;/spanspan style--i:10;/spanspan style--i:11;/spanspan style--i:12;/spanspan style--i:13;/spanspan style--i:14;/spanspan style--i:15;/spanspan style--i:16;/spanspan style--i:17;/spanspan style--i:18;/spanspan style--i:19;/spanspan style--i:20;/spanspan style--i:21;/spanspan style--i:22;/spanspan style--i:23;/spanspan style--i:24;/spanspan style--i:25;/spanspan style--i:26;/spanspan style--i:27;/spanspan style--i:28;/spanspan style--i:29;/spanspan style--i:30;/spanspan style--i:31;/spanspan style--i:32;/spanspan style--i:33;/spanspan style--i:34;/spanspan style--i:35;/spanspan style--i:36;/spanspan style--i:37;/spanspan style--i:38;/spanspan style--i:39;/spanspan style--i:40;/spanspan style--i:41;/spanspan style--i:42;/spanspan style--i:43;/spanspan style--i:44;/spanspan style--i:45;/spanspan style--i:46;/spanspan style--i:47;/spanspan style--i:48;/spanspan style--i:49;/span/div
/body/htmlCSS
* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #1f293a;
}.container {position: relative;width: 256px;height: 256px;display: flex;justify-content: center;align-items: center;
}.container span {position: absolute;left: 0;width: 32px;height: 6px;background: #2c4766;border-radius: 8px;transform-origin: 128px;transform: scale(2.2) rotate(calc(var(--i)*(360deg/50)));animation: animateBlink 3s linear infinite;animation-delay: calc(var(--i)*(3s/50));
}
keyframes animateBlink {0% {background:#0ef;}25% {background:#2c4766;}}.login-box {position: absolute;width: 400px;/* background: red; */
}.login-box form {width: 100%;padding: 0 50px;
}h2 {font-size: 2em;color: #0ef;text-align: center;
}.input-box {position: relative;margin: 25px 0;
}.input-box input {width: 100%;height: 50px;background: transparent;border: 2px solid #2c4766;outline: none;border-radius: 40px;transition: 0.5s ease;font-size: 1em;color: #fff;padding: 0 20px;}.input-box input:focus,
.input-box input:valid {border-color: #0ef;
}.input-box label {position: absolute;top: 50%;left: 20px;transform: translateY(-50%);font-size: 1em;color: #fff;pointer-events: none;transition: 0.5s ease;
}.input-box input:focus~label,
.input-box input:valid~label {top: 1px;font-size: 0.85em;background: #1f293a;padding: 0 6px;color: #0ef;
}.forgot-pass {margin: -15px 0 10px;text-align: center;
}.forgot-pass a {color: #fff;font-size: 0.85em;text-decoration: none;
}.forgot-pass a:hover {text-decoration: underline;
}.btn {width: 100%;height: 45px;background: #0ef;border: none;outline: none;border-radius: 40px;cursor: pointer;font-size: 1em;color: #1f293a;font-weight: 600;
}.signup-link {margin: 20px 0 10px;text-align: center;
}.signup-link a {color: #0ef;font-size: 1em;text-decoration: none;font-weight: 600;
}.signup-link a:hover {text-decoration: underline;
}
