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

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

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

1、登录页面效果

2、登录页面代码

 1 @{
 2     Layout = null;
 3 }
 4 @model Domain.SYS_USER
 5 
 6 
 7  8     "utf-8">
 9     "X-UA-Compatible" content="IE=edge,chrome=1">
10     "viewport" content="width=device-width, initial-scale=1.0">
11     12     
15     "/Content/css/login/login.css" rel="stylesheet" />
16 
17 "loginBody">  
18                 
class="login">
19                     
class="login_logo">
20                         "/Content/images/login/login_top_tip.png" />
21                     
22                     
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                             
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                                 
class="code-img">
68                                     "imgVerify" src="/Sys/Account/ValidateCode" alt="看不清？点击更换" onclick="this.src = this.src + '?'" style="vertical-align:middle;" />
69                                 
70                             
71                             
class="login_fields_submit">
72                                 "submit">登录
73                             
74                         }
75                     
76                     
class="success">
77                         
认证失败
78                         

79                         
class="login_fields_resubmit">
80                             "javascript:dig.Back();">重新登录
81                         
82                     
83                     
class="copyright">
84                         Copyright © 果冻布丁喜之郎
85                     
86                 
87                 
class="authent">
88                     "/Content/images/login/puff.svg" />
89                     
身份认证中
90                 
91 
92 
93 94 95 96 97 98 

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 2 

（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 

同时，控制容器和鼠标移动的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.wander;
23         this.vx += sin(this.theta) * 0.1;
24         this.vy += cos(this.theta) * 0.1;
25         this.radius *= 0.96;
26         this.alive = this.radius > 0.5
27     },
28     draw: function(ctx) {
29         ctx.beginPath();
30         ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
31         ctx.fillStyle = this.color;
32         ctx.fill()
33     }
34 };
35 var MAX_PARTICLES = 280;
36 var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];
37 var particles = [];
38 var pool = [];
39 var demo = Sketch.create({
40     container: document.getElementById('loginBody')
41 });
42 demo.setup = function() {
43     var i, x, y;
44     x = (demo.width * 0.5) + random(-100, 100);
45     y = (demo.height * 0.5) + random(-100, 100);
46     demo.spawn(0, 999)
47 };
48 demo.spawn = function(x, y) {
49     if (particles.length >= MAX_PARTICLES) pool.push(particles.shift());
50     particle = pool.length ? pool.pop() : new Particle();
51     particle.init(x, y, random(5, 40));
52     particle.wander = random(0.5, 2.0);
53     particle.color = random(COLOURS);
54     particle.drag = random(0.9, 0.99);
55     theta = random(TWO_PI);
56     force = random(2, 8);
57     particle.vx = sin(theta) * force;
58     particle.vy = cos(theta) * force;
59     particles.push(particle)
60 };
61 demo.update = function() {
62     var i, particle;
63     for (i = particles.length - 1; i >= 0; i--) {
64         particle = particles[i];
65         if (particle.alive) particle.move();
66         else pool.push(particles.splice(i, 1)[0])
67     }
68 };
69 demo.draw = function() {
70     demo.globalCompositeOperation = 'lighter';
71     for (var i = particles.length - 1; i >= 0; i--) {
72         particles[i].draw(demo)
73     }
74 };
75 demo.mousemove = function() {
76     var particle, theta, force, touch, max, i, j, n;
77     for (i = 0, n = demo.touches.length; i ) {
78         touch = demo.touches[i], max = random(1, 4);
79         for (j = 0; j ) {
80             demo.spawn(touch.x, touch.y)
81         }
82     }
83 };

完成了，就这些东西。。。

然后，代码我已经贴出来了，几个js插件如果大家不方便找，我给大家提供一下

百度网盘

算是个水贴吧，不过既然大家喜欢，还是贴一下。