jquery+css实现金属登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现金属登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> /*------------------------- Simple reset --------------------------*/ *{ margin:0; padding:0; } /*------------------------- General Styles --------------------------*/ html{ background:url('//repo.bfw.wiki/bfwrepo/images/lottery/bg_tile.jpg') #161718; } body{ background:url('//repo.bfw.wiki/bfwrepo/images/lottery/bg_center.jpg') no-repeat center center; min-height: 600px; padding: 200px 0 0; font:14px/1.3 'Segoe UI',Arial, sans-serif; } a, a:visited { text-decoration:none; outline:none; color:#54a6de; } a:hover{ text-decoration:underline; } section, footer{ display: block; } /*---------------------------- Styling the forms -----------------------------*/ #formContainer{ width:288px; height:321px; margin:0 auto; position:relative; z-index:1; -moz-perspective: 800px; -webkit-perspective: 800px; perspective: 800px; } #formContainer form{ width:100%; height:100%; position:absolute; top:0; left:0; /* Enabling 3d space for the transforms */ -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; /* When the forms are flipped, they will be hidden */ -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Enabling a smooth animated transition */ -moz-transition:0.8s; -webkit-transition:0.8s; transition:0.8s; /* Configure a keyframe animation for Firefox */ -moz-animation: pulse 2s infinite; /* Configure it for Chrome and Safari */ -webkit-animation: pulse 2s infinite; } /* Firefox Keyframe Animation */ @-moz-keyframes pulse{ 0%{ box-shadow:0 0 1px #008aff;} 50%{ box-shadow:0 0 8px #008aff;} 100%{ box-shadow:0 0 1px #008aff;} } /* Webkit keyframe animation */ @-webkit-keyframes pulse{ 0%{ box-shadow:0 0 1px #008aff;} 50%{ box-shadow:0 0 10px #008aff;} 100%{ box-shadow:0 0 1px #008aff;} } #login{ background:url('//repo.bfw.wiki/bfwrepo/images/lottery/login_form_bg.jpg') no-repeat; z-index:100; } #recover{ background:url('//repo.bfw.wiki/bfwrepo/images/lottery/recover_form_bg.jpg') no-repeat; z-index:1; opacity:0; /* Rotating the recover password form by default */ -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); } #formContainer.flipped #login{ opacity:0; /** * Rotating the login form when the * flipped class is added to the container */ -moz-transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); } #formContainer.flipped #recover{ opacity:1; /* Rotating the recover div into view */ -moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } /*---------------------------- Inputs, Buttons & Links -----------------------------*/ #login .flipLink, #recover .flipLink{ /* The blue ribbon links */ height: 65px; overflow: hidden; position: absolute; right: 0; text-indent: -9999px; top: 0; width: 65px; } #recover .flipLink{ right:auto; left:0; } #login:after{ /* The "Click here" tooltip */ width:98px; height:16px; content:''; background:url('//repo.bfw.wiki/bfwrepo/images/lottery/click_here.png') no-repeat; position:absolute; right:-120px; top:22px; } input[type=text],input[type=password]{ /* The text fields */ font: 15px 'Segoe UI',Arial,sans-serif; border: none; background:none; height: 36px; left: 26px; position: absolute; top: 176px; width: 234px; text-indent: 8px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); color:#eee; outline:none; } #loginPass{ top: 215px; } #recoverEmail{ top:215px; } input[type=submit]{ /* Submit button */ opacity:0.9; position:absolute; top:262px; left:25px; width: 239px; height:36px; cursor:pointer; border-radius:6px; box-shadow:0 1px 1px #888; border:none; color:#fff; font:14px/36px 'Segoe UI Lig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0