css简洁自适应带背景图片登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:css简洁自适应带背景图片登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { font-family: "Open Sans", sans-serif; height: 100vh; background: url("//repo.bfw.wiki/bfwrepo/image/606abe1deea7e.png") 50% fixed; background-size: cover; } @keyframes spinner { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(359deg); } } * { box-sizing: border-box; } .wrapper { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 20px; background: rgba(4, 40, 68, 0.85); } .login { border-radius: 2px 2px 5px 5px; padding: 10px 20px 20px 20px; width: 90%; max-width: 320px; background: #ffffff; position: relative; padding-bottom: 80px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); } .login.loading button { max-height: 100%; padding-top: 50px; } .login.loading button .spinner { opacity: 1; top: 40%; } .login.ok button { background-color: #8bc34a; } .login.ok button .spinner { border-radius: 0; border-top-color: transparent; border-right-color: transparent; height: 20px; animation: none; transform: rotateZ(-45deg); } .login input { display: block; padding: 15px 10px; margin-bottom: 10px; width: 100%; border: 1px solid #ddd; transition: border-width 0.2s ease; border-radius: 2px; color: #ccc; } .login input + i.fa { color: #fff; font-size: 1em; position: absolute; margin-top: -47px; opacity: 0; left: 0; transition: all 0.1s ease-in; } .login input:focus { outline: none; color: #444; border-color: #2196F3; border-left-width: 35px; } .login input:focus + i.fa { opacity: 1; left: 30px; transition: all 0.25s ease-out; } .login a { font-size: 0.8em; color: #2196F3; text-decoration: none; } .login .title { color: #444; font-size: 1.2em; font-weight: bold; margin: 10px 0 30px 0; border-bottom: 1px solid #eee; padding-bottom: 20px; } .login button { width: 100%; height: 100%; padding: 10px 10px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0