黑色登录页面
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Login UI</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Quicksand:400,500,700'> <style> @import url(https://fonts.googleapis.com/css?family=Quicksand:200,400,500,700); body, html { height: 100%; } * { box-sizing: border-box; } *:focus { outline: none; } p { margin-top: 0; margin-bottom: 0.75em; } p:last-child { margin-bottom: 0; } body { background: #1d1e23; display: flex; justify-content: center; align-items: center; perspective: 1000px; font-family: "Quicksand", sans-serif; font-weight: 200; } input { font-family: "Quicksand", sans-serif; font-weight: 200; } .loading { height: 4px; width: 4px; border-radius: 2px; background: #fffdf3; position: absolute; top: 1.5em; right: 1.5em; opacity: 0.2; transition: 0.3s ease-in; } .loading.on { opacity: 1; box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.7); } .loading.logout { animation: logout 1s ease-out forwards; } @keyframes logout { 0%, 80% { opacity: 1; background: red; box-shadow: 0px 0px 10px 0px red; } 100% { background: white; box-shadow: 0px 0px 0px 0px red; } } .container { height: 330px; width: 300px; border-radius: 2px; transform: rotateX(4deg); border-top: 1px solid #242424; box-shadow: 0px 370px 20px #00000030; transition: all 0.5s ease-out; } .container .control { position: relative; z-index: 2; padding: 2.5em; border-radius: 2px; background: #100e0f; height: 330px; width: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container .meta { width: 0; position: absolute; background: #fffdf3; left: 0; top: 0; border-radius: 3px; height: 330px; width: 300px; transition: 0.5s ease-out; display: flex; flex-direction: column; } .container .meta__map { width: 100%; flex-grow: 1; } .container .meta__contact { padding: 2em; } .container .avatar { width: 0px; height: 0px; background: #000; background-size: cover; background-position: center; border-bottom: 1px solid #242424; border-radius: 75px; transition: 0.5s; margin-bottom: 1em; } .container.logged-in { width: 600px; display: flex; border-top: 1px solid #323; padding: 0; position: relative; box-shadow: 0px 400px 30px #00000030; transform: rotateX(4deg) rotateY(15deg) rotateZ(-5deg) translateY(-40px); border-radius: 5px; } .container.logged-in .control, .container.logged-in .meta { border-radius: 5px; } .container.logged-in .loading { background: #b4e861; box-shadow: 0px 0px 10px 0px #b4e861; } .container.logged-in .entry { display: none; } .container.logged-in .acc_name { display: inline; color: #fffdf3; } .container.logged-in .avatar { display: block; width: 150px; height: 150px; } .container.logged-in .close { display: block; } .container.logged-in .control { width: 300px; z-index: 3; } .container.logged-in .control .logo { position: absolute; top: 1.25em; left: 1.25em; transform: scale(0.66); } .container.logged-in .meta { left: 300px; } .container.logged-in .meta__map { display: block; } .container.logged-in .entry__submit { display: none; } .entry { transition: height 0.75s ease-out; } .entry__tex.........完整代码请登录后点击上方下载按钮下载查看
网友评论0