今天分享一套压箱底的精品拿出来分享，值得大伙收藏。
html05_酷炫登录页面模板分享
本资源整理自互联网，仅供学习交流使用，请勿商用，坚持每日分享一套Java学习资源干货，一起提高，一起进步！！！
资源截图：
部分源码：
1 <script>
2 //window.setTimeout(showfh,3000);
3 var timer;
4 function showfh(){
5 fhi = 1;
6 //关闭提示晃动屏幕，注释掉这句话即可
7 timer = setInterval(xzfh2, 10);
8 };
9 var current = 0;
10 function xzfh(){
11 current = (current)%360;
12 document.body.style.transform = 'rotate('+current+'deg)';
13 current ++;
14 if(current>360){current = 0;}
15 };
16 var fhi = 1;
17 var current2 = 1;
18 function xzfh2(){
19 if(fhi>50){
20 document.body.style.transform = 'rotate(0deg)';
21 clearInterval(timer);
22 return;
23 }
24 current = (current2)%360;
25 document.body.style.transform = 'rotate('+current+'deg)';
26 current ++;
27 if(current2 == 1){current2 = -1;}else{current2 = 1;}
28 fhi++;
29 };
30 </script>
1 <!-- 注册 -->
2 <div id="windows2" style="display: none;">
3 <div id="loginbox">
4 <form action="" method="post" name="loginForm" id="loginForm">
5 <div class="control-group normal_text">
6 <h3>
7 <img src="static/login/logo.png" alt="Logo" />
8 </h3>
9 </div>
10 <div class="control-group">
11 <div class="controls">
12 <div class="main_input_box">
13 <span class="add-on bg_lg">
14 <i>用户</i>
15 </span><input type="text" name="USERNAME" id="USERNAME" value="" placeholder="请输入用户名" />
16 </div>
17 </div>
18 </div>
19 <div class="control-group">
20 <div class="controls">
21 <div class="main_input_box">
22 <span class="add-on bg_ly">
23 <i>密码</i>
24 </span><input type="password" name="PASSWORD" id="PASSWORD" placeholder="请输入密码" class="keypad" keypadMode="full" allowKeyboard="true" value=""/>
25 </div>
26 </div>
27 </div>
28 <div class="control-group">
29 <div class="controls">
30 <div class="main_input_box">
31 <span class="add-on bg_ly">
32 <i>重输</i>
33 </span><input type="password" name="chkpwd" id="chkpwd" placeholder="请重新输入密码" class="keypad" keypadMode="full" allowKeyboard="true" value=""/>
34 </div>
35 </div>
36 </div>
37 <div class="control-group">
38 <div class="controls">
39 <div class="main_input_box">
40 <span class="add-on bg_lg">
41 <i>姓名</i>
42 </span><input type="text" name="NAME" id="name" value="" placeholder="请输入姓名" />
43 </div>
44 </div>
45 </div>
46 <div class="control-group">
47 <div class="controls">
48 <div class="main_input_box">
49 <span class="add-on bg_lg">
50 <i>邮箱</i>
51 </span><input type="text" name="EMAIL" id="EMAIL" value="" placeholder="请输入邮箱" />
52 </div>
53 </div>
54 </div>
55 <div class="form-actions">
56 <div style="width:86%;padding-left:8%;">
57
58 <div style="float: left;padding-top:2px;">
59 <i><img src="static/login/yan.png" /></i>
60 </div>
61 <div style="float: left;" class="codediv">
62 <input type="text" name="rcode" id="rcode" class="login_code"
63 style="height:16px; padding-top:4px;" />
64 </div>
65 <div style="float: left;">
66 <i><img style="height:22px;" id="zcodeImg" alt="点击更换" title="点击更换" src="" /></i>
67 </div>
68 <span class="pull-right" style="padding-right:3%;"><a href="javascript:changepage(2);" class="btn btn-success">取消</a></span>
69 <span class="pull-right"><a onclick="register();" class="flip-link btn btn-info" id="to-recover">提交</a></span>
70 </div>
71 </div>
72 </form>
73 <div class="controls">
74 <div class="main_input_box">
75 <font color="white"><span id="nameerr">Copyright © XX科技 2100</span></font>
76 </div>
77 </div>
78 </div>
79 </div>
80
81 </div>
82 <div id="templatemo_banner_slide" class="container_wapper">
83 <div class="camera_wrap camera_emboss" id="camera_slide">
84 <!-- 背景图片 -->
85 <div data-src="static/login/images/banner_slide_01.jpg"></div>
86 <div data-src="static/login/images/banner_slide_02.jpg"></div>
87 <div data-src="static/login/images/banner_slide_03.jpg"></div>
88 <div data-src="static/login/images/banner_slide_04.jpg"></div>
89 <div data-src="static/login/images/banner_slide_05.jpg"></div>
90 </div>
91 <!-- #camera_wrap_3 -->
92 </div>
1//提交注册
2 function register(){
3 if(rcheck()){
4 var nowtime = date2str(new Date(),"yyyyMMdd");
5 $.ajax({
6 type: "POST",
7 url: 'appSysUser/registerSysUser.do',
8 data: {USERNAME:$("#USERNAME").val(),PASSWORD:$("#PASSWORD").val(),NAME:$("#name").val(),EMAIL:$("#EMAIL").val(),rcode:$("#rcode").val(),FKEY:$.md5('USERNAME'+nowtime+',fh,'),tm:new Date().getTime()},
9 dataType:'json',
10 cache: false,
11 success: function(data){
12 if("00" == data.result){
13 $("#windows2").hide();
14 $("#windows1").show();
15 $("#loginbox").tips({
16 side : 1,
17 msg : '注册成功,请登录',
18 bg : '#68B500',
19 time : 3
20 });
21 changeCode1();
22 }else if("04" == data.result){
23 $("#USERNAME").tips({
24 side : 1,
25 msg : "用户名已存在",
26 bg : '#FF5080',
27 time : 15
28 });
29 showfh();
30 $("#USERNAME").focus();
31 }else if("06" == data.result){
32 $("#rcode").tips({
33 side : 1,
34 msg : "验证码输入有误",
35 bg : '#FF5080',
36 time : 15
37 });
38 showfh();
39 $("#rcode").focus();
40 }
41 }
42 });
43 }
44 }
45
46 //邮箱格式校验
47 function ismail(mail){
48 return(new RegExp(/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/).test(mail));
49 }
50 //js 日期格式
51 </script>
52
53 <script src="static/js/jquery-1.7.2.js"></script>
54 <script src="static/login/js/camera.min.js"></script>
55 <script src="static/login/js/templatemo_script.js"></script>
56 <script src="static/login/js/ban.js"></script>
57 <script type="text/javascript" src="static/js/jQuery.md5.js"></script>
58 <script type="text/javascript" src="static/js/jquery.tips.js"></script>
59 <script type="text/javascript" src="static/js/jquery.cookie.js"></script>
60
61 <!-- 软键盘控件start -->
62 <script type="text/javascript" src="static/login/keypad/js/form/keypad.js"></script>
63 <script type="text/javascript" src="static/login/keypad/js/framework.js"></script>
64 <!-- 软键盘控件end -->
因文章有限，完整代码关注微信公众号：java小白逆袭之路 回复 html05 获取
【java小白逆袭之路】公众号
（回复 html05 获取）
感谢老铁支持！！！