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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0