div+css实现简洁登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现简洁登录表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display:flex; height:100vh; justify-content:center; align-items:center; margin: 0; background-image:url('//repo.bfw.wiki/bfwrepo/image/642e2dd7f27a0.png'); background-repeat:no-repeat; background-size: cover; font-family: sans-serif; } .login-box { width: 400px; padding: 40px; background:#ffffff17; border-radius: 10px; backdrop-filter: blur(15px) saturate(200%); } .login-box h2 { color: #fff; text-align: center; } .login-box .user-box { position: relative; } .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #f34ae2; outline: none; background: transparent; } .user-box label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; transition: .5s; } input:focus ~ label, input:valid ~ label { top: -20px; left: 0; color: white; font-siz.........完整代码请登录后点击上方下载按钮下载查看
网友评论0