ホームページ >ウェブフロントエンド >htmlチュートリアル >[無私の共有: ASP.NET MVC の入門からマスターまで] ゼロからフレームワークを構築し、ログイン インターフェイスのフロントエンド スタイルと特殊効果_html/css_WEB-ITnose でプロジェクトを実行しましょう。
[無私の共有: ASP.NET MVC の入門からマスターまで] ゼロからフレームワークを構築し、ログイン インターフェイスのフロントエンド スタイルと特殊効果_html/css_WEB-ITnose でプロジェクトを実行しましょう。
- WBOYオリジナル
- 2016-06-24 11:16:101409ブラウズ
多くの友人が UI を望んでいるとも言いましたが、バックグラウンド UI はインターネット上にたくさんあります。 LZ のログインを気に入っている友人もいます。LZ のログイン インターフェイスもオンラインで発見され、その後少し変更されました。
でも、みんなが気に入っているので、LZ はそれをみんなと共有します。
1. ログイン ページの効果
2. ログイン ページのコード
3. まず、ログイン ページのスタイル シートを共有します。
4.スタイルは、ブラウザで確認してください。1 つはログイン フォームの特殊効果と検証で、もう 1 つは背景の花火です。まずログイン フォームに行きましょう。
ここでは、まず 2 つの JS プラグインを導入する必要があります
1 @{ 2 Layout = null; 3 } 4 @model Domain.SYS_USER 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">10 <meta name="viewport" content="width=device-width, initial-scale=1.0">11 <title>后台登录</title>12 <!--[if IE]>13 <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>14 <![endif]-->15 <link href="/Content/css/login/login.css" rel="stylesheet" />16 </head>17 <body id="loginBody"> 18 <div class="login">19 <div class="login_logo">20 <img src="/Content/images/login/login_top_tip.png" />21 </div>22 <div class="login_fields">23 @using (Ajax.BeginForm("login", null, new AjaxOptions()24 {25 HttpMethod = "Post",26 OnBegin = "dig.Loading",27 OnSuccess = "dig.Success",28 OnFailure = "dig.Failure",29 OnComplete = "dig.Complete"30 }, new { @class = "form-signin" }))31 {32 @Html.AntiForgeryToken()33 @Html.TextBoxFor(model => model.ACCOUNT,34 new35 {36 @placeholder = "用户名",37 @maxlength = 15,38 @datatype = "*",39 @nullmsg = "请输入用户名！",40 @errormsg = "请输入用户名！",41 @required = "required",42 @autocomplete = "off"43 })44 @Html.PasswordFor(model => model.PASSWORD,45 new46 {47 @placeholder = "密码",48 @maxlength = 12,49 @datatype = "*",50 @nullmsg = "请输入密码！",51 @errormsg = "请输入密码！",52 @required = "required",53 @autocomplete = "off"54 })55 <div class="from_control">56 @Html.TextBox("code", "",57 new58 {59 @class = "form-control",60 @placeholder = "请输入验证码",61 @datatype = "*",62 @nullmsg = "请输入验证码！",63 @maxlength = 4,64 @required = "required",65 @autocomplete = "off"66 })67 <div class="code-img">68 <img id="imgVerify" src="/Sys/Account/ValidateCode" alt="看不清？点击更换" onclick="this.src = this.src + '?'" style="vertical-align:middle;" />69 </div>70 </div>71 <div class="login_fields_submit">72 <button type="submit">登录</button>73 </div>74 }75 </div>76 <div class="success">77 <h1>认证失败</h1>78 <p></p>79 <p class="login_fields_resubmit">80 <a href="javascript:dig.Back();">重新登录</a>81 </p>82 </div>83 <div class="copyright">84 Copyright © 果冻布丁喜之郎85 </div>86 </div>87 <div class="authent">88 <img src="/Content/images/login/puff.svg" />89 <p>身份认证中</p>90 </div>91 </body>92 </html>93 <script type="text/javascript" src="/Content/js/jquery.min.js"></script>94 <script type="text/javascript" src="/Content/js/jquery.unobtrusive-ajax.min.js"></script>95 <script type="text/javascript" src="/Content/js/login/jquery-ui.min.js"></script>96 <script type="text/javascript" src="/Content/js/login/stopExecutionOnTimeout.js"></script>97 <script type="text/javascript" src="/Content/js/login/sketch.min.js"></script>98 <script type="text/javascript" src="/Content/js/login/login.min.js"></script> (これら 2 つのプラグインを導入した後、ログイン検証が行われます
)。
1 body{-webkit-perspective:800px;perspective:800px;height:100vh;margin:0;overflow:hidden;font-family:'Microsoft YaHei','Source Sans Pro',sans-serif;background-image:url(/Content/images/login/egg_shell.png)} 2 body ::-webkit-input-placeholder{color:#4E546D} 3 .login{opacity:1;top:20px;-webkit-transition-timing-function:cubic-bezier(.68,-.25,.265,.85);-webkit-transition-property:-webkit-transform,opacity,box-shadow,top,left;transition-property:transform,opacity,box-shadow,top,left;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transform-origin:161px 100%;-ms-transform-origin:161px 100%;transform-origin:161px 100%;-webkit-transform:rotateX(0);transform:rotateX(0);position:relative;width:240px;border-top:3px solid #D8312A;height:300px;position:absolute;left:0;right:0;margin:auto;top:0;bottom:0;padding:60px 40px 40px 40px;background:#35394a;background:-webkit-gradient(linear,left bottom,right top,color-stop(0,#35394a),color-stop(100%,#1f222e));background:-webkit-linear-gradient(45deg,#35394a 0,#1f222e 100%);background:linear-gradient(45deg,#35394a 0,#1f222e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e', GradientType=1 )} 4 .login_logo{margin-bottom:15px} 5 .login_logo img{width:240px} 6 .authent{display:none;background:#35394a;background:-webkit-gradient(linear,left bottom,right top,color-stop(0,#35394a),color-stop(100%,#1f222e));background:-webkit-linear-gradient(45deg,#35394a 0,#1f222e 100%);background:linear-gradient(45deg,#35394a 0,#1f222e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e', GradientType=1 );position:absolute;left:0;right:6px;margin:auto;width:100px;color:#fff;text-transform:uppercase;letter-spacing:1px;text-align:center;padding:20px 70px;top:200px;bottom:0;height:70px;opacity:0} 7 .test{box-shadow:0 20px 30px 3px rgba(0,0,0,.55);pointer-events:none;top:-100px!important;-webkit-transform:rotateX(70deg) scale(.8)!important;transform:rotateX(70deg) scale(.8)!important;opacity:.6!important;-webkit-filter:blur(1px);filter:blur(1px)} 8 .testtwo{left:-5px!important} 9 .login_fields{height:208px;position:absolute;left:0}10 .login_fields .from_control{position:relative}11 .login_fields input[type=text],.login_fields input[type=password]{color:#afb1be;width:190px;margin-top:-2px;background:#32364a;left:0;padding:10px 65px;border-top:2px solid #393d52;border-bottom:2px solid #393d52;border-right:none;border-left:none;outline:0;font-family:'Microsoft YaHei','Source Sans Pro',sans-serif;box-shadow:none}12 .login_fields_resubmit,.login_fields_submit{position:relative;top:35px;left:0;width:80%;right:0;margin:auto;text-align:center}13 .login_fields_resubmit a,.login_fields_submit button{border-radius:50px;background:0 0;padding:10px 50px;border:2px solid #DC6180;color:#FFF;text-transform:uppercase;font-size:13px;-webkit-transition-property:background,color;transition-property:background,color;-webkit-transition-duration:.3s;transition-duration:.3s;border:2px solid #009688;color:#009688;font-family:'Microsoft YaHei','Source Sans Pro',sans-serif;text-decoration:none}14 .login_fields_resubmit a:focus,.login_fields_resubmit a:hover,.login_fields_submit button:focus,.login_fields_submit button:hover{color:#FFF;background:#009688;cursor:pointer;-webkit-transition-property:background,color;transition-property:background,color;-webkit-transition-duration:.3s;transition-duration:.3s;box-shadow:none;outline:0}15 .login .copyright{position:absolute;bottom:20px;left:35px;width:250px;text-align:center;color:#afb1be}16 .success{display:none;color:#d5d8e2}17 .code-img{position:absolute;right:8px;top:3px} このようにして、ログインボックスと検証と結果を返す特殊効果が実現されます
5. 背景の花火の特殊効果は js を導入する必要があります
1 <script type="text/javascript" src="/Content/js/login/jquery-ui.min.js"></script>2 <script type="text/javascript" src="/Content/js/login/stopExecutionOnTimeout.js"></script>
、コンテナとマウスの動きを制御するjsコードもlogin.min.jsにあります。これで完了です。 。 。
それでは、いくつかのjsプラグインを見つけるのが不便であれば、私が提供します
Baidu Netdisk
ウォーター投稿ですが、皆さん気に入ってくださっているので、投稿させていただきます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。