css布局实现一个高科技炫酷动态登录框页面效果代码
代码语言:html
所属分类:表单美化
代码描述:css布局实现一个高科技炫酷动态登录框页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box} *,body{padding:0px; margin:0px;color: #ffffff;/*font-family: "微软雅黑";*/} body{ background: url("//repo.bfw.wiki/bfwrepo/images/login/bj.jpg") no-repeat; background-size: cover; font-size: .16rem; color: #ffffff; position: relative; width: 100%; height: 100%; } .main{ margin: 0 auto; width: 100%; height: 100%; position: relative; } /*头部*/ .header{ width: 100%; height: 1.5rem; /*background: red;*/ } .header .header-center{ width: 50%; height: 1.2rem; position: relative; margin: 0 auto; } .header .header-center .header-title{ text-align: center; color: #ffffff; font-size: .4rem; text-shadow: 0 0 .3rem #00d8ff; line-height: 1.05rem; } .header .header-img{ background: url("//repo.bfw.wiki/bfwrepo/images/login/head.gif") no-repeat center center; background-size: 100%; height: 100%; width: 100%; position: absolute; top: .8rem; } .content{ width: 12rem; height: 7rem; /*background: green;*/ margin: 1rem auto 0 auto; /*border: 1px solid green;*/ } .content .content-left{ width:6.2rem ; height: 5.8rem; /*border: 1px solid red;*/ background: url("//repo.bfw.wiki/bfwrepo/images/login/d.png") no-repeat; background-size: 100% 100%; padding: 0.4rem 0; box-sizing: border-box; margin-right: 2%; float: left; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .content .content-left { -webkit-transform: rotate(360deg); animation: rotation 15s linear infinite; -moz-animation: rotation 15s linear infinite; -webkit-animation: rotation 15s linear infinite; -o-animation: rotation 15s linear infinite; } .content .content-right{ width:5.4rem ; height: 5.8rem; background: url("//repo.bfw.wiki/bfwrepo/images/login/e.png") no-repeat; background-size: 100% 100%; float: right; position: relative; } .right-infp{ width: 4rem; height: 3rem; margin: auto auto; /* border: 1px solid red;*/ vertical-align: center; position: absolute; top:1.6rem; left: 0.9rem; } .right-infp-name{ background: url("//repo.bfw.wiki/bfwrepo/images/login/b.png") no-repeat; width: 100%; height: 0.5rem; background-size: 100% 100%; line-height:0.45rem; margin-bottom: 0.4rem; position: relative; } .right-infp-name input{ width: 85%; border: none; box-sizing: border-box; height: 0.5rem; margin-left: 0.5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0