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

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

很多朋友要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="/static/imghwm/default1.png"  data-src="/Content/images/login/login_top_tip.png"  class="lazy" / alt="【无私分享：从入门到精通ASP.NET MVC】从0开始，一起搭框架、做项目 登录界面前端样式和特效_html/css_WEB-ITnose" >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                                                         new35                                                         {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                                                         new46                                                         {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                                                         new58                                                         {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 src="/static/imghwm/default1.png"  data-src="/Sys/Account/ValidateCode"  class="lazy"  id="imgVerify" alt="看不清？点击更换" onclick="this.src = this.src + '?'"   style="max-width:90%" />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 id="认证失败">认证失败</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 &copy; 果冻布丁喜之郎85                     </div>86                 </div>87                 <div class="authent">88                     <img  src="/static/imghwm/default1.png"  data-src="/Content/images/login/puff.svg"  class="lazy" / alt="【无私分享：从入门到精通ASP.NET MVC】从0开始，一起搭框架、做项目 登录界面前端样式和特效_html/css_WEB-ITnose" >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: 0114         }, {115             duration: 200,116             queue: false117         }).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.016     },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.527     },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 < n; i++) {78         touch = demo.touches[i], max = random(1, 4);79         for (j = 0; j < max; j++) {80             demo.spawn(touch.x, touch.y)81         }82     }83 };

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

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

百度网盘

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles