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

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

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

1、登录页面效果

2、登录页面代码

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

登录后复制

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

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

登录后复制

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

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

盘古大模型

华为云推出的一系列高性能人工智能大模型

207

查看详情

<span style="color: #008080;">1</span> <script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/Content/js/login/jquery-ui.min.js</span><span style="color: #800000;">"</span>></script>
<span style="color: #008080;">2</span> <script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/Content/js/login/stopExecutionOnTimeout.js</span><span style="color: #800000;">"</span>></script>

登录后复制

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

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

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

登录后复制

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

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

<span style="color: #008080;">1</span> <script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/Content/js/login/sketch.min.js</span><span style="color: #800000;">"</span>></script>

登录后复制

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

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

登录后复制

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

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

百度网盘

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