css布局实现简约登录注册页面代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现简约登录注册页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body, html { margin: 0; padding: 0; height: 100%; } .container { height: 100%; background: linear-gradient(to right, #fbc2eb, #a6c1ee); } .login-form { background-color: #fff; width: 350px; height: 500px; border-radius: 15px; /* 定位到中心 */ text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .text { /* 标题Login的样式 */ font-size: 30px; font-weight: bold; text-align: center; line-height: 80px; margin-top: 40px; } .form-item, .btn, .other { margin: 40px auto; width: 90%; } input { width: 80%; margin-top: 20px; padding: 10px; /* placeholder变更为大写字体 */ text-transform: uppercase; /* 边框效果 */ border: 0; outline: none; border-bottom: 1px solid #fbc2eb; } input::placeholder{ font-weight: bold; color: #acb7c9; } input:focus { /* 当输入框获取焦点时的效果 */ /* box-shadow: 0px 0px 5px #fbc2eb; border-bottom: 1px solid #fff; */ animation: bBottom 2s infinite ; } @keyframes bBottom { 50% { border-bottom: 1px solid #a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0