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

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

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

1、登录页面效果

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

立即学习“前端免费学习笔记（深入）”；

2、登录页面代码

https://www.php.cn/faq/ 1 https://www.php.cn/faq/@{https://www.php.cn/faq/ 2     Layout = https://www.php.cn/faq/nullhttps://www.php.cn/faq/;https://www.php.cn/faq/ 3 https://www.php.cn/faq/}https://www.php.cn/faq/ 4 https://www.php.cn/faq/@model Domain.SYS_USERhttps://www.php.cn/faq/ 5 https://www.php.cn/faq/ 6 https://www.php.cn/faq/ 7 https://www.php.cn/faq/ 8     <meta charset=https://www.php.cn/faq/"https://www.php.cn/faq/utf-8https://www.php.cn/faq/">https://www.php.cn/faq/ 9     <meta http-equiv=https://www.php.cn/faq/"https://www.php.cn/faq/X-UA-Compatiblehttps://www.php.cn/faq/" content=https://www.php.cn/faq/"https://www.php.cn/faq/IE=edge,chrome=1https://www.php.cn/faq/">https://www.php.cn/faq/10     <meta name=https://www.php.cn/faq/"https://www.php.cn/faq/viewporthttps://www.php.cn/faq/" content=https://www.php.cn/faq/"https://www.php.cn/faq/width=device-width, initial-scale=1.0https://www.php.cn/faq/">https://www.php.cn/faq/11     <span class="com">后台登录</span>https://www.php.cn/faq/12     <!--[https://www.php.cn/faq/if IE]>https://www.php.cn/faq/13         <script src=https://www.php.cn/faq/"https://www.php.cn/faq/http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.jshttps://www.php.cn/faq/">https://www.php.cn/faq/14     https://www.php.cn/faq/15     <link href=https://www.php.cn/faq/"https://www.php.cn/faq//Content/css/login/login.csshttps://www.php.cn/faq/" rel=https://www.php.cn/faq/"https://www.php.cn/faq/stylesheethttps://www.php.cn/faq/" />https://www.php.cn/faq/16 https://www.php.cn/faq/17 <body id=https://www.php.cn/faq/"https://www.php.cn/faq/loginBodyhttps://www.php.cn/faq/">  https://www.php.cn/faq/18                 <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/loginhttps://www.php.cn/faq/">https://www.php.cn/faq/19                     <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/login_logohttps://www.php.cn/faq/">https://www.php.cn/faq/20                         @@##@@"https://www.php.cn/faq//Content/images/login/login_top_tip.pnghttps://www.php.cn/faq/" />https://www.php.cn/faq/21                     https://www.php.cn/faq/22                     <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/login_fieldshttps://www.php.cn/faq/">https://www.php.cn/faq/23                         @using (Ajax.BeginForm(https://www.php.cn/faq/"https://www.php.cn/faq/loginhttps://www.php.cn/faq/", https://www.php.cn/faq/null, https://www.php.cn/faq/newhttps://www.php.cn/faq/ AjaxOptions()https://www.php.cn/faq/24 https://www.php.cn/faq/                        {https://www.php.cn/faq/25                             HttpMethod = https://www.php.cn/faq/"https://www.php.cn/faq/Posthttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/26                             OnBegin = https://www.php.cn/faq/"https://www.php.cn/faq/dig.Loadinghttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/27                             OnSuccess = https://www.php.cn/faq/"https://www.php.cn/faq/dig.Successhttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/28                             OnFailure = https://www.php.cn/faq/"https://www.php.cn/faq/dig.Failurehttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/29                             OnComplete = https://www.php.cn/faq/"https://www.php.cn/faq/dig.Completehttps://www.php.cn/faq/"https://www.php.cn/faq/30                         }, https://www.php.cn/faq/new { @class = https://www.php.cn/faq/"https://www.php.cn/faq/form-signinhttps://www.php.cn/faq/"https://www.php.cn/faq/ }))https://www.php.cn/faq/31 https://www.php.cn/faq/                        {https://www.php.cn/faq/32 https://www.php.cn/faq/                            @Html.AntiForgeryToken()https://www.php.cn/faq/33                             @Html.TextBoxFor(model =>https://www.php.cn/faq/ model.ACCOUNT,https://www.php.cn/faq/34                                                         https://www.php.cn/faq/newhttps://www.php.cn/faq/35 https://www.php.cn/faq/                                                        {https://www.php.cn/faq/36                                                             @placeholder = https://www.php.cn/faq/"https://www.php.cn/faq/用户名https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/37                                                             @maxlength = https://www.php.cn/faq/15https://www.php.cn/faq/,https://www.php.cn/faq/38                                                             @datatype = https://www.php.cn/faq/"https://www.php.cn/faq/*https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/39                                                             @nullmsg = https://www.php.cn/faq/"https://www.php.cn/faq/请输入用户名！https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/40                                                             @errormsg = https://www.php.cn/faq/"https://www.php.cn/faq/请输入用户名！https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/41                                                             @required = https://www.php.cn/faq/"https://www.php.cn/faq/requiredhttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/42                                                             @autocomplete = https://www.php.cn/faq/"https://www.php.cn/faq/offhttps://www.php.cn/faq/"https://www.php.cn/faq/43 https://www.php.cn/faq/                                                        })https://www.php.cn/faq/44                             @Html.PasswordFor(model =>https://www.php.cn/faq/ model.PASSWORD,https://www.php.cn/faq/45                                                         https://www.php.cn/faq/newhttps://www.php.cn/faq/46 https://www.php.cn/faq/                                                        {https://www.php.cn/faq/47                                                             @placeholder = https://www.php.cn/faq/"https://www.php.cn/faq/密码https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/48                                                             @maxlength = https://www.php.cn/faq/12https://www.php.cn/faq/,https://www.php.cn/faq/49                                                             @datatype = https://www.php.cn/faq/"https://www.php.cn/faq/*https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/50                                                             @nullmsg = https://www.php.cn/faq/"https://www.php.cn/faq/请输入密码！https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/51                                                             @errormsg = https://www.php.cn/faq/"https://www.php.cn/faq/请输入密码！https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/52                                                             @required = https://www.php.cn/faq/"https://www.php.cn/faq/requiredhttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/53                                                             @autocomplete = https://www.php.cn/faq/"https://www.php.cn/faq/offhttps://www.php.cn/faq/"https://www.php.cn/faq/54 https://www.php.cn/faq/                                                        })https://www.php.cn/faq/55                             <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/from_controlhttps://www.php.cn/faq/">https://www.php.cn/faq/56                                 @Html.TextBox(https://www.php.cn/faq/"https://www.php.cn/faq/codehttps://www.php.cn/faq/", https://www.php.cn/faq/""https://www.php.cn/faq/,https://www.php.cn/faq/57                                                         https://www.php.cn/faq/newhttps://www.php.cn/faq/58 https://www.php.cn/faq/                                                        {https://www.php.cn/faq/59                                                             @class = https://www.php.cn/faq/"https://www.php.cn/faq/form-controlhttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/60                                                             @placeholder = https://www.php.cn/faq/"https://www.php.cn/faq/请输入验证码https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/61                                                             @datatype = https://www.php.cn/faq/"https://www.php.cn/faq/*https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/62                                                             @nullmsg = https://www.php.cn/faq/"https://www.php.cn/faq/请输入验证码！https://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/63                                                             @maxlength = https://www.php.cn/faq/4https://www.php.cn/faq/,https://www.php.cn/faq/64                                                             @required = https://www.php.cn/faq/"https://www.php.cn/faq/requiredhttps://www.php.cn/faq/"https://www.php.cn/faq/,https://www.php.cn/faq/65                                                             @autocomplete = https://www.php.cn/faq/"https://www.php.cn/faq/offhttps://www.php.cn/faq/"https://www.php.cn/faq/66 https://www.php.cn/faq/                                                        })https://www.php.cn/faq/67                                 <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/code-imghttps://www.php.cn/faq/">https://www.php.cn/faq/68                                     @@##@@"https://www.php.cn/faq/imgVerifyhttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Sys/Account/ValidateCodehttps://www.php.cn/faq/" alt=https://www.php.cn/faq/"https://www.php.cn/faq/看不清？点击更换https://www.php.cn/faq/" onclick=https://www.php.cn/faq/"https://www.php.cn/faq/this.src = this.src + '?'https://www.php.cn/faq/" style=https://www.php.cn/faq/"https://www.php.cn/faq/vertical-align:middle;https://www.php.cn/faq/" />https://www.php.cn/faq/69                                 https://www.php.cn/faq/70                             https://www.php.cn/faq/71                             <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/login_fields_submithttps://www.php.cn/faq/">https://www.php.cn/faq/72                                 <button type=https://www.php.cn/faq/"https://www.php.cn/faq/submithttps://www.php.cn/faq/">登录https://www.php.cn/faq/73                             https://www.php.cn/faq/74 https://www.php.cn/faq/                        }https://www.php.cn/faq/75                     https://www.php.cn/faq/76                     <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/successhttps://www.php.cn/faq/">https://www.php.cn/faq/77                         认证失败
https://www.php.cn/faq/78                         
https://www.php.cn/faq/79                         <p https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/login_fields_resubmithttps://www.php.cn/faq/">https://www.php.cn/faq/80                             <a href=https://www.php.cn/faq/"https://www.php.cn/faq/javascript:dig.Back();https://www.php.cn/faq/">重新登录https://www.php.cn/faq/81                         https://www.php.cn/faq/82                     https://www.php.cn/faq/83                     <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/copyrighthttps://www.php.cn/faq/">https://www.php.cn/faq/84 https://www.php.cn/faq/                        Copyright © 果冻布丁喜之郎https://www.php.cn/faq/85                     https://www.php.cn/faq/86                 https://www.php.cn/faq/87                 <div https://www.php.cn/faq/class=https://www.php.cn/faq/"https://www.php.cn/faq/authenthttps://www.php.cn/faq/">https://www.php.cn/faq/88                     @@##@@"https://www.php.cn/faq//Content/images/login/puff.svghttps://www.php.cn/faq/" />https://www.php.cn/faq/89                     身份认证中
https://www.php.cn/faq/90                 https://www.php.cn/faq/91 https://www.php.cn/faq/92 https://www.php.cn/faq/93 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/jquery.min.jshttps://www.php.cn/faq/">https://www.php.cn/faq/94 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/jquery.unobtrusive-ajax.min.jshttps://www.php.cn/faq/">https://www.php.cn/faq/95 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/login/jquery-ui.min.jshttps://www.php.cn/faq/">https://www.php.cn/faq/96 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/login/stopExecutionOnTimeout.jshttps://www.php.cn/faq/">https://www.php.cn/faq/97 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/login/sketch.min.jshttps://www.php.cn/faq/">https://www.php.cn/faq/98 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/login/login.min.jshttps://www.php.cn/faq/">

登录后复制

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

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

登录后复制

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

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

https://www.php.cn/faq/1 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/login/jquery-ui.min.jshttps://www.php.cn/faq/">https://www.php.cn/faq/2 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/login/stopExecutionOnTimeout.jshttps://www.php.cn/faq/">

登录后复制

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

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

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

登录后复制

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

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

https://www.php.cn/faq/1 <script type=https://www.php.cn/faq/"https://www.php.cn/faq/text/javascripthttps://www.php.cn/faq/" src=https://www.php.cn/faq/"https://www.php.cn/faq//Content/js/login/sketch.min.jshttps://www.php.cn/faq/">

登录后复制

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

https://www.php.cn/faq/ 1 https://www.php.cn/faq/function Particle(x, y, radius) {https://www.php.cn/faq/ 2     https://www.php.cn/faq/thishttps://www.php.cn/faq/.init(x, y, radius)https://www.php.cn/faq/ 3 https://www.php.cn/faq/}https://www.php.cn/faq/ 4 Particle.prototype =https://www.php.cn/faq/ {https://www.php.cn/faq/ 5 https://www.php.cn/faq/    init: function(x, y, radius) {https://www.php.cn/faq/ 6         https://www.php.cn/faq/this.alive = https://www.php.cn/faq/truehttps://www.php.cn/faq/;https://www.php.cn/faq/ 7         https://www.php.cn/faq/this.radius = radius || https://www.php.cn/faq/10https://www.php.cn/faq/;https://www.php.cn/faq/ 8         https://www.php.cn/faq/this.wander = https://www.php.cn/faq/0.15https://www.php.cn/faq/;https://www.php.cn/faq/ 9         https://www.php.cn/faq/this.theta =https://www.php.cn/faq/ random(TWO_PI);https://www.php.cn/faq/10         https://www.php.cn/faq/this.drag = https://www.php.cn/faq/0.92https://www.php.cn/faq/;https://www.php.cn/faq/11         https://www.php.cn/faq/this.color = https://www.php.cn/faq/'https://www.php.cn/faq/#fffhttps://www.php.cn/faq/'https://www.php.cn/faq/;https://www.php.cn/faq/12         https://www.php.cn/faq/this.x = x || https://www.php.cn/faq/0.0https://www.php.cn/faq/;https://www.php.cn/faq/13         https://www.php.cn/faq/this.y = y || https://www.php.cn/faq/0.0https://www.php.cn/faq/;https://www.php.cn/faq/14         https://www.php.cn/faq/this.vx = https://www.php.cn/faq/0.0https://www.php.cn/faq/;https://www.php.cn/faq/15         https://www.php.cn/faq/this.vy = https://www.php.cn/faq/0.0https://www.php.cn/faq/16 https://www.php.cn/faq/    },https://www.php.cn/faq/17 https://www.php.cn/faq/    move: function() {https://www.php.cn/faq/18         https://www.php.cn/faq/this.x += https://www.php.cn/faq/thishttps://www.php.cn/faq/.vx;https://www.php.cn/faq/19         https://www.php.cn/faq/this.y += https://www.php.cn/faq/thishttps://www.php.cn/faq/.vy;https://www.php.cn/faq/20         https://www.php.cn/faq/this.vx *= https://www.php.cn/faq/thishttps://www.php.cn/faq/.drag;https://www.php.cn/faq/21         https://www.php.cn/faq/this.vy *= https://www.php.cn/faq/thishttps://www.php.cn/faq/.drag;https://www.php.cn/faq/22         https://www.php.cn/faq/this.theta += random(-https://www.php.cn/faq/0.5, https://www.php.cn/faq/0.5) * https://www.php.cn/faq/thishttps://www.php.cn/faq/.wander;https://www.php.cn/faq/23         https://www.php.cn/faq/this.vx += sin(https://www.php.cn/faq/this.theta) * https://www.php.cn/faq/0.1https://www.php.cn/faq/;https://www.php.cn/faq/24         https://www.php.cn/faq/this.vy += cos(https://www.php.cn/faq/this.theta) * https://www.php.cn/faq/0.1https://www.php.cn/faq/;https://www.php.cn/faq/25         https://www.php.cn/faq/this.radius *= https://www.php.cn/faq/0.96https://www.php.cn/faq/;https://www.php.cn/faq/26         https://www.php.cn/faq/this.alive = https://www.php.cn/faq/this.radius > https://www.php.cn/faq/0.5https://www.php.cn/faq/27 https://www.php.cn/faq/    },https://www.php.cn/faq/28 https://www.php.cn/faq/    draw: function(ctx) {https://www.php.cn/faq/29 https://www.php.cn/faq/        ctx.beginPath();https://www.php.cn/faq/30         ctx.arc(https://www.php.cn/faq/this.x, https://www.php.cn/faq/this.y, https://www.php.cn/faq/this.radius, https://www.php.cn/faq/0https://www.php.cn/faq/, TWO_PI);https://www.php.cn/faq/31         ctx.fillStyle = https://www.php.cn/faq/thishttps://www.php.cn/faq/.color;https://www.php.cn/faq/32 https://www.php.cn/faq/        ctx.fill()https://www.php.cn/faq/33 https://www.php.cn/faq/    }https://www.php.cn/faq/34 https://www.php.cn/faq/};https://www.php.cn/faq/35 https://www.php.cn/faq/var MAX_PARTICLES = https://www.php.cn/faq/280https://www.php.cn/faq/;https://www.php.cn/faq/36 https://www.php.cn/faq/var COLOURS = [https://www.php.cn/faq/'https://www.php.cn/faq/#69D2E7https://www.php.cn/faq/', https://www.php.cn/faq/'https://www.php.cn/faq/#A7DBD8https://www.php.cn/faq/', https://www.php.cn/faq/'https://www.php.cn/faq/#E0E4CChttps://www.php.cn/faq/', https://www.php.cn/faq/'https://www.php.cn/faq/#F38630https://www.php.cn/faq/', https://www.php.cn/faq/'https://www.php.cn/faq/#FA6900https://www.php.cn/faq/', https://www.php.cn/faq/'https://www.php.cn/faq/#FF4E50https://www.php.cn/faq/', https://www.php.cn/faq/'https://www.php.cn/faq/#F9D423https://www.php.cn/faq/'https://www.php.cn/faq/];https://www.php.cn/faq/37 https://www.php.cn/faq/var particles =https://www.php.cn/faq/ [];https://www.php.cn/faq/38 https://www.php.cn/faq/var pool =https://www.php.cn/faq/ [];https://www.php.cn/faq/39 https://www.php.cn/faq/var demo =https://www.php.cn/faq/ Sketch.create({https://www.php.cn/faq/40     container: document.getElementById(https://www.php.cn/faq/'https://www.php.cn/faq/loginBodyhttps://www.php.cn/faq/'https://www.php.cn/faq/)https://www.php.cn/faq/41 https://www.php.cn/faq/});https://www.php.cn/faq/42 demo.setup =https://www.php.cn/faq/ function() {https://www.php.cn/faq/43     https://www.php.cn/faq/varhttps://www.php.cn/faq/ i, x, y;https://www.php.cn/faq/44     x = (demo.width * https://www.php.cn/faq/0.5) + random(-https://www.php.cn/faq/100, https://www.php.cn/faq/100https://www.php.cn/faq/);https://www.php.cn/faq/45     y = (demo.height * https://www.php.cn/faq/0.5) + random(-https://www.php.cn/faq/100, https://www.php.cn/faq/100https://www.php.cn/faq/);https://www.php.cn/faq/46     demo.spawn(https://www.php.cn/faq/0, https://www.php.cn/faq/999https://www.php.cn/faq/)https://www.php.cn/faq/47 https://www.php.cn/faq/};https://www.php.cn/faq/48 demo.spawn =https://www.php.cn/faq/ function(x, y) {https://www.php.cn/faq/49     https://www.php.cn/faq/if (particles.length >=https://www.php.cn/faq/ MAX_PARTICLES) pool.push(particles.shift());https://www.php.cn/faq/50     particle = pool.length ? pool.pop() : https://www.php.cn/faq/newhttps://www.php.cn/faq/ Particle();https://www.php.cn/faq/51     particle.init(x, y, random(https://www.php.cn/faq/5, https://www.php.cn/faq/40https://www.php.cn/faq/));https://www.php.cn/faq/52     particle.wander = random(https://www.php.cn/faq/0.5, https://www.php.cn/faq/2.0https://www.php.cn/faq/);https://www.php.cn/faq/53     particle.color =https://www.php.cn/faq/ random(COLOURS);https://www.php.cn/faq/54     particle.drag = random(https://www.php.cn/faq/0.9, https://www.php.cn/faq/0.99https://www.php.cn/faq/);https://www.php.cn/faq/55     theta =https://www.php.cn/faq/ random(TWO_PI);https://www.php.cn/faq/56     force = random(https://www.php.cn/faq/2, https://www.php.cn/faq/8https://www.php.cn/faq/);https://www.php.cn/faq/57     particle.vx = sin(theta) *https://www.php.cn/faq/ force;https://www.php.cn/faq/58     particle.vy = cos(theta) *https://www.php.cn/faq/ force;https://www.php.cn/faq/59 https://www.php.cn/faq/    particles.push(particle)https://www.php.cn/faq/60 https://www.php.cn/faq/};https://www.php.cn/faq/61 demo.update =https://www.php.cn/faq/ function() {https://www.php.cn/faq/62     https://www.php.cn/faq/varhttps://www.php.cn/faq/ i, particle;https://www.php.cn/faq/63     https://www.php.cn/faq/for (i = particles.length - https://www.php.cn/faq/1; i >= https://www.php.cn/faq/0; i--https://www.php.cn/faq/) {https://www.php.cn/faq/64         particle =https://www.php.cn/faq/ particles[i];https://www.php.cn/faq/65         https://www.php.cn/faq/ifhttps://www.php.cn/faq/ (particle.alive) particle.move();https://www.php.cn/faq/66         https://www.php.cn/faq/else pool.push(particles.splice(i, https://www.php.cn/faq/1)[https://www.php.cn/faq/0https://www.php.cn/faq/])https://www.php.cn/faq/67 https://www.php.cn/faq/    }https://www.php.cn/faq/68 https://www.php.cn/faq/};https://www.php.cn/faq/69 demo.draw =https://www.php.cn/faq/ function() {https://www.php.cn/faq/70     demo.globalCompositeOperation = https://www.php.cn/faq/'https://www.php.cn/faq/lighterhttps://www.php.cn/faq/'https://www.php.cn/faq/;https://www.php.cn/faq/71     https://www.php.cn/faq/for (https://www.php.cn/faq/var i = particles.length - https://www.php.cn/faq/1; i >= https://www.php.cn/faq/0; i--https://www.php.cn/faq/) {https://www.php.cn/faq/72 https://www.php.cn/faq/        particles[i].draw(demo)https://www.php.cn/faq/73 https://www.php.cn/faq/    }https://www.php.cn/faq/74 https://www.php.cn/faq/};https://www.php.cn/faq/75 demo.mousemove =https://www.php.cn/faq/ function() {https://www.php.cn/faq/76     https://www.php.cn/faq/varhttps://www.php.cn/faq/ particle, theta, force, touch, max, i, j, n;https://www.php.cn/faq/77     https://www.php.cn/faq/for (i = https://www.php.cn/faq/0, n = demo.touches.length; i < n; i++https://www.php.cn/faq/) {https://www.php.cn/faq/78         touch = demo.touches[i], max = random(https://www.php.cn/faq/1, https://www.php.cn/faq/4https://www.php.cn/faq/);https://www.php.cn/faq/79         https://www.php.cn/faq/for (j = https://www.php.cn/faq/0; j < max; j++https://www.php.cn/faq/) {https://www.php.cn/faq/80 https://www.php.cn/faq/            demo.spawn(touch.x, touch.y)https://www.php.cn/faq/81 https://www.php.cn/faq/        }https://www.php.cn/faq/82 https://www.php.cn/faq/    }https://www.php.cn/faq/83 };

登录后复制

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

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

百度网盘

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

<img src="https://www.php.cn/faq/<img id="https://www.php.cn/faq/<img src="https://www.php.cn/faq/

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

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

认证失败

css3中matrix函数的使用

为什么每个前端开发者都要理解页面的渲染？

认证失败

css3中matrix函数的使用

为什么每个前端开发者都要理解页面的渲染？

请输入验证码

公告

....支付确认中....

举报

请选择举报类型*