jquery实现简洁自适应登录表单页面效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery实现简洁自适应登录表单页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> .form { text-align:center; font-family: 'Raleway', sans-serif; height: 440px; background-color: white; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; -webkit-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.2); box-shadow: 10px 10px 60px 10px rgba(0, 0, 0, 0.2); } h1{ color:#EC3A48; margin-top:30px; } body { margin: 0; } .container { margin-top:50px; position: relative; padding: 30px; } .background { background: #eb3349; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #eb3349, #f45c43); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #eb3349, #f45c43); position: absolute; width: 100%; height: 100%; opacity: 0.8; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } input { width: 100%; height: 30px; border-width: 0 0 2px 0px; border-color: lightgray; background-color: transparent; opacity: 0.4; font-size: 16px; color: #EC3A48; -webkit-transition: border-color 1s ease-out; -moz-transition: border-color 1s ease-out; -o-transition: border-color 1s ease-out; } label{ font-size:12px; float:left; } input.password1{ margin-top:50px; } input:focus { outline: 0; opacity: 1; border-color: #EC3A48; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: lightgray; font-size: 16px; } ::-moz-placeholder { /* Firefox 19+ */ color: lightgray; font-size: 16px; } :-ms-input-placeholder { /* IE 10+ */ color: lightgray; font-size: 16px; } :-moz-placeholder { /* Firefox 18- */ color: lightgray; font-size: 16px; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } /* FF 4-18 */ input:focus::-moz-placeholder { color: transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder { color: transparent; } button { margin-top: 80px; height: 50px; width: 340px; left:30px; background-color: #EC3A48; position: absolute; border: 0; border-radius: 10px; color: white; font-size: 16px; transform-origin: 50% 50%; } button:focus { outline: none; } button:hover { opacity: 0.8; cursor: pointer; } .spinner { box-shadow: inset 0 0 0 1em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .spinner:before, .spinner:after{ position: absolute; content: ''; } .spinner:before { width: 27px; height: 54px; background-color:white; -moz-border-radius: 54px 0 0 54px; border-radius: 54px 0 0 54px; top: -4px; left: -4px; position:absolute; -webkit-transform-origin: 26px 26px; transform-origin: 26px 26px; -webkit-animation: loading 2s infinite ease; animation: loading 2s infinite ease; animation-iteration-count:4; } .spinner:after { width: 28px; height: 52px; background-color:white; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; top: -3px; left: 22px; position:absolute; -webkit-transform-origin: 0px 25px; transform-origin: 0px 25px; -webkit-animation: loading 2s infinite .........完整代码请登录后点击上方下载按钮下载查看
网友评论0