无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目 登录界面前端样式和特效

Posted 我来自江湖,江湖却没有关于我的传说...

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目 登录界面前端样式和特效相关的知识,希望对你有一定的参考价值。

很多朋友要UI,我也说过,后台的UI就是BootStrap,网上很多的。也有朋友喜欢LZ的登录,LZ的登录界面也是网上找的,然后稍微做了下修改。

不过既然大家喜欢,那么LZ就分享给大家。

 

1、登录页面效果

2、登录页面代码

 1 @{
 2     Layout = null;
 3 }
 4 @model Domain.SYS_USER
 5 <!DOCTYPE html>
 6 <html>
 7 <head>
 8     <meta charset="utf-8">
 9     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10     <meta name="viewport" content="width=device-width, initial-scale=1.0">
11     <title>后台登录</title>
12     <!--[if IE]>
13         <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
14     <![endif]-->
15     <link href="/Content/css/login/login.css" rel="stylesheet" />
16 </head>
17 <body id="loginBody">  
18                 <div class="login">
19                     <div class="login_logo">
20                         <img src="/Content/images/login/login_top_tip.png" />
21                     </div>
22                     <div class="login_fields">
23                         @using (Ajax.BeginForm("login", null, new AjaxOptions()
24                         {
25                             HttpMethod = "Post",
26                             OnBegin = "dig.Loading",
27                             OnSuccess = "dig.Success",
28                             OnFailure = "dig.Failure",
29                             OnComplete = "dig.Complete"
30                         }, new { @class = "form-signin" }))
31                         {
32                             @Html.AntiForgeryToken()
33                             @Html.TextBoxFor(model => model.ACCOUNT,
34                                                         new
35                                                         {
36                                                             @placeholder = "用户名",
37                                                             @maxlength = 15,
38                                                             @datatype = "*",
39                                                             @nullmsg = "请输入用户名!",
40                                                             @errormsg = "请输入用户名!",
41                                                             @required = "required",
42                                                             @autocomplete = "off"
43                                                         })
44                             @Html.PasswordFor(model => model.PASSWORD,
45                                                         new
46                                                         {
47                                                             @placeholder = "密码",
48                                                             @maxlength = 12,
49                                                             @datatype = "*",
50                                                             @nullmsg = "请输入密码!",
51                                                             @errormsg = "请输入密码!",
52                                                             @required = "required",
53                                                             @autocomplete = "off"
54                                                         })
55                             <div class="from_control">
56                                 @Html.TextBox("code", "",
57                                                         new
58                                                         {
59                                                             @class = "form-control",
60                                                             @placeholder = "请输入验证码",
61                                                             @datatype = "*",
62                                                             @nullmsg = "请输入验证码!",
63                                                             @maxlength = 4,
64                                                             @required = "required",
65                                                             @autocomplete = "off"
66                                                         })
67                                 <div class="code-img">
68                                     <img id="imgVerify" src="/Sys/Account/ValidateCode" alt="看不清?点击更换" onclick="this.src = this.src + \'?\'" style="vertical-align:middle;" />
69                                 </div>
70                             </div>
71                             <div class="login_fields_submit">
72                                 <button type="submit">登录</button>
73                             </div>
74                         }
75                     </div>
76                     <div class="success">
77                         <h1>认证失败</h1>
78                         <p></p>
79                         <p class="login_fields_resubmit">
80                             <a href="javascript:dig.Back();">重新登录</a>
81                         </p>
82                     </div>
83                     <div class="copyright">
84                         Copyright © 果冻布丁喜之郎
85                     </div>
86                 </div>
87                 <div class="authent">
88                     <img src="/Content/images/login/puff.svg" />
89                     <p>身份认证中</p>
90                 </div>
91 </body>
92 </html>
93 <script type="text/javascript" src="/Content/js/jquery.min.js"></script>
94 <script type="text/javascript" src="/Content/js/jquery.unobtrusive-ajax.min.js"></script>
95 <script type="text/javascript" src="/Content/js/login/jquery-ui.min.js"></script>
96 <script type="text/javascript" src="/Content/js/login/stopExecutionOnTimeout.js"></script>
97 <script type="text/javascript" src="/Content/js/login/sketch.min.js"></script>
98 <script type="text/javascript" src="/Content/js/login/login.min.js"></script>

 

3、首先分享一下 登录页面的样式表,就一个 login.css

 1 body{-webkit-perspective:800px;perspective:800px;height:100vh;margin:0;overflow:hidden;font-family:\'Microsoft YaHei\',\'Source Sans Pro\',sans-serif;background-image:url(/Content/images/login/egg_shell.png)}
 2 body ::-webkit-input-placeholder{color:#4E546D}
 3 .login{opacity:1;top:20px;-webkit-transition-timing-function:cubic-bezier(.68,-.25,.265,.85);-webkit-transition-property:-webkit-transform,opacity,box-shadow,top,left;transition-property:transform,opacity,box-shadow,top,left;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transform-origin:161px 100%;-ms-transform-origin:161px 100%;transform-origin:161px 100%;-webkit-transform:rotateX(0);transform:rotateX(0);position:relative;width:240px;border-top:3px solid #D8312A;height:300px;position:absolute;left:0;right:0;margin:auto;top:0;bottom:0;padding:60px 40px 40px 40px;background:#35394a;background:-webkit-gradient(linear,left bottom,right top,color-stop(0,#35394a),color-stop(100%,#1f222e));background:-webkit-linear-gradient(45deg,#35394a 0,#1f222e 100%);background:linear-gradient(45deg,#35394a 0,#1f222e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#35394a\', endColorstr=\'#1f222e\', GradientType=1 )}
 4 .login_logo{margin-bottom:15px}
 5 .login_logo img{width:240px}
 6 .authent{display:none;background:#35394a;background:-webkit-gradient(linear,left bottom,right top,color-stop(0,#35394a),color-stop(100%,#1f222e));background:-webkit-linear-gradient(45deg,#35394a 0,#1f222e 100%);background:linear-gradient(45deg,#35394a 0,#1f222e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#35394a\', endColorstr=\'#1f222e\', GradientType=1 );position:absolute;left:0;right:6px;margin:auto;width:100px;color:#fff;text-transform:uppercase;letter-spacing:1px;text-align:center;padding:20px 70px;top:200px;bottom:0;height:70px;opacity:0}
 7 .test{box-shadow:0 20px 30px 3px rgba(0,0,0,.55);pointer-events:none;top:-100px!important;-webkit-transform:rotateX(70deg) scale(.8)!important;transform:rotateX(70deg) scale(.8)!important;opacity:.6!important;-webkit-filter:blur(1px);filter:blur(1px)}
 8 .testtwo{left:-5px!important}
 9 .login_fields{height:208px;position:absolute;left:0}
10 .login_fields .from_control{position:relative}
11 .login_fields input[type=text],.login_fields input[type=password]{color:#afb1be;width:190px;margin-top:-2px;background:#32364a;left:0;padding:10px 65px;border-top:2px solid #393d52;border-bottom:2px solid #393d52;border-right:none;border-left:none;outline:0;font-family:\'Microsoft YaHei\',\'Source Sans Pro\',sans-serif;box-shadow:none}
12 .login_fields_resubmit,.login_fields_submit{position:relative;top:35px;left:0;width:80%;right:0;margin:auto;text-align:center}
13 .login_fields_resubmit a,.login_fields_submit button{border-radius:50px;background:0 0;padding:10px 50px;border:2px solid #DC6180;color:#FFF;text-transform:uppercase;font-size:13px;-webkit-transition-property:background,color;transition-property:background,color;-webkit-transition-duration:.3s;transition-duration:.3s;border:2px solid #009688;color:#009688;font-family:\'Microsoft YaHei\',\'Source Sans Pro\',sans-serif;text-decoration:none}
14 .login_fields_resubmit a:focus,.login_fields_resubmit a:hover,.login_fields_submit button:focus,.login_fields_submit button:hover{color:#FFF;background:#009688;cursor:pointer;-webkit-transition-property:background,color;transition-property:background,color;-webkit-transition-duration:.3s;transition-duration:.3s;box-shadow:none;outline:0}
15 .login .copyright{position:absolute;bottom:20px;left:35px;width:250px;text-align:center;color:#afb1be}
16 .success{display:none;color:#d5d8e2}
17 .code-img{position:absolute;right:8px;top:3px}

4、样式,大家直接弄下来,自己用浏览器的检查看看就行了吧,js特效 就用了两个 一个是那个登陆表单的特效和验证,一个就是背景那个烟花了,先来登录表单

这里要首先引入两个JS插件

1 <script type="text/javascript" src="/Content/js/login/jquery-ui.min.js"></script>
2 <script type="text/javascript" src="/Content/js/login/stopExecutionOnTimeout.js"></script>

(jquery.min.js库 首先是要引入的),引入这两个插件之后 就是我们的登录验证了

这些样式我写到了login.min.js里面

  1 var dig = {
  2     Loading: function() {
  3         $(\'.login\').addClass(\'test\');
  4         $(\'.login\').addClass(\'testtwo\');
  5         setTimeout(function() {
  6             $(\'.authent\').show().animate({
  7                 top: -100
  8             }, {
  9                 easing: \'easeOutQuint\',
 10                 duration: 600,
 11                 queue: false
 12             });
 13             $(\'.authent\').animate({
 14                 opacity: 1
 15             }, {
 16                 duration: 200,
 17                 queue: false
 18             }).addClass(\'visible\')
 19         }, 500)
 20     },
 21     Success: function(result) {
 22         if (result.Status == "y") {
 23             window.location.href = result.ReUrl
 24         } else {
 25             setTimeout(function() {
 26                 $(\'.authent\').show().animate({
 27                     right: 500
 28                 }, {
 29                     easing: \'easeOutQuint\',
 30                     duration: 600,
 31                     queue: false
 32                 });
 33                 $(\'.authent\').animate({
 34                     opacity: 0
 35                 }, {
 36                     duration: 200,
 37                     queue: false
 38                 }).addClass(\'visible\');
 39                 $(\'.login\').removeClass(\'testtwo\')
 40             }, 2500);
 41             setTimeout(function() {
 42                 $(\'.login\').removeClass(\'test\');
 43                 $(\'.login div\').fadeOut(123)
 44             }, 2800);
 45             setTimeout(function() {
 46                 $(\'.success p:eq(0)\').text(result.Msg);
 47                 $(\'.success\').fadeIn()
 48             }, 3200)
 49         }
 50     },
 51     Failure: function() {
 52         setTimeout(function() {
 53             $(\'.authent\').show().animate({
 54                 right: 90
 55             }, {
 56                 easing: \'easeOutQuint\',
 57                 duration: 600,
 58                 queue: false
 59             });
 60             $(\'.authent\').animate({
 61                 opacity: 0
 62             }, {
 63                 duration: 200,
 64                 queue: false
 65             }).addClass(\'visible\');
 66             $(\'.login\').removeClass(\'testtwo\')
 67         }, 2500);
 68         setTimeout(function() {
 69             $(\'.login\').removeClass(\'test\');
 70             $(\'.login div\').fadeOut(123)
 71         }, 2800);
 72         setTimeout(function() {
 73             $(\'.success p:eq(0)\').text(result.Msg);
 74             $(\'.success\').fadeIn()
 75         }, 3200)
 76     },
 77     Complete: function() {
 78         $("#login-button").attr("disabled", false)
 79     },
 80     ErrorMsg: function(msg) {
 81         setTimeout(function() {
 82             $(\'.authent\').show().animate({
 83                 right: 90
 84             }, {
 85                 easing: \'easeOutQuint\',
 86                 duration: 600,
 87                 queue: false
 88             });
 89             $(\'.authent\').animate({
 90                 opacity: 0
 91             }, {
 92                 duration: 200,
 93                 queue: false
 94             }).addClass(\'visible\');
 95             $(\'.login\').removeClass(\'testtwo\')
 96         }, 2500);
 97         setTimeout(function() {
 98             $(\'.login\').removeClass(\'test\');
 99             $(\'.login div\').fadeOut(123)
100         }, 2800);
101         setTimeout(function() {
102             $(\'.success p:eq(0)\').text(msg);
103             $(\'.success\').fadeIn()
104         }, 3200)
105     },
106     Back: function() {
107         $(\'.login\').addClass(\'test\');
108         $(\'.login\').addClass(\'testtwo\');
109         $(\'.success p:eq(0)\').text(\'\');
110         $(\'.authent\').hide().animate({
111             opacity: 0,
112             top: 0,
113             right: 0
114         }, {
115             duration: 200,
116             queue: false
117         }).removeClass(\'visible\');
118         setTimeout(function() {
119             $(\'.login\').removeClass(\'test\');
120             $(\'.login div\').fadeIn(123);
121             $(\'.success\').hide();
122             $("#imgVerify").prop("src", $("#imgVerify").prop("src") + "?")
123         }, 500)
124     }
125 };

这样就实现了登录框以及验证和结果返回特效了

5、背景烟花特效 需要引入一个js 

1 <script type="text/javascript" src="/Content/js/login/sketch.min.js"></script>

同时,控制容器和鼠标移动的js代码 也在login.min.js里

 1 function Particle(x, y, radius) {
 2     this.init(x, y, radius)
 3 }
 4 Particle.prototype = {
 5     init: function(x, y, radius) {
 6         this.alive = true;
 7         this.radius = radius || 10;
 8         this.wander = 0.15;
 9         this.theta = random(TWO_PI);
10         this.drag = 0.92;
11         this.color = \'#fff\';
12         this.x = x || 0.0;
13         this.y = y || 0.0;
14         this.vx = 0.0;
15         this.vy = 0.0
16     },
17     move: function() {
18         this.x += this.vx;
19         this.y += this.vy;
20         this.vx *= this.drag;
21         this.vy *= this.drag;
22         this.theta += random(-0.5, 0.5) * this.wande

以上是关于无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目 登录界面前端样式和特效的主要内容,如果未能解决你的问题,请参考以下文章

无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目 (11)文件管理

无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目 角色管理,分配权限

无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目(5.3) 登录功能的实现,丰富数据表建立关联

无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目 登录界面前端样式和特效

无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目 控制器基类 主要做登录用户权限认证日志记录等工作

无私分享:从入门到精通ASP.NET MVC从0开始,一起搭框架做项目(7.2) 模块管理,模块的添加修改删除