表单/表格

错误摇晃登录注册表单jQuery特效

阿里云


这是一款带摇晃特效的扁平风格登录注册表单界面设计。该登录注册表单界面简洁大方,通过滑动来切换用户登录和用户注册界面,并且在验证用户信息出错时,整个表单界面会有左右摇晃的动画效果。

HTML 结构

该扁平风格登录注册表单界面的 HTML 结构如下:

也想出现在这里?联系我们
创客主机
  1. <div id="wrapper" class="login-page">
  2.   <div id="login_form" class="form">
  3.     <form class="register-form">
  4.       <input type="text" placeholder="用户名" id="r_user_name"/>
  5.       <input type="password" placeholder="密码" id="r_password" />
  6.       <input type="text" placeholder="电子邮件" id="r_emial"/>
  7.       <button id="create">创建账户</button>
  8.       <p class="message">已经有了一个账户? <a href="#">立刻登录</a></p>
  9.     </form>
  10.     <form class="login-form">
  11.       <input type="text" placeholder="用户名" id="user_name"/>
  12.       <input type="password" placeholder="密码" id="password"/>
  13.       <button id="login">登 录</button>
  14.       <p class="message">还没有账户? <a href="#">立刻创建</a></p>
  15.     </form>
  16.   </div>
  17. </div>

CSS 样式

为表单添加下面的必要 CSS 样式:

  1. @import url(https://fonts.googleapis.com/css?family=Roboto:300);
  2. .login-page {
  3.   width: 360px;
  4.   padding: 8% 0 0;
  5.   margin: auto;
  6. }
  7. .form {
  8.   position: relative;
  9.   z-index: 1;
  10.   background: #FFFFFF;
  11.   max-width: 360px;
  12.   margin: 0 auto 100px;
  13.   padding: 45px;
  14.   text-align: center;
  15.   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  16. }
  17. .form input {
  18.   font-family: "Roboto", sans-serif;
  19.   outline: 0;
  20.   background: #f2f2f2;
  21.   width: 100%;
  22.   border: 0;
  23.   margin: 0 0 15px;
  24.   padding: 15px;
  25.   box-sizing: border-box;
  26.   font-size: 14px;
  27. }
  28. .form button {
  29.   font-family: "Microsoft YaHei","Roboto", sans-serif;
  30.   text-transform: uppercase;
  31.   outline: 0;
  32.   background: #4CAF50;
  33.   width: 100%;
  34.   border: 0;
  35.   padding: 15px;
  36.   color: #FFFFFF;
  37.   font-size: 14px;
  38.   -webkit-transition: all 0.3 ease;
  39.   transition: all 0.3 ease;
  40.   cursor: pointer;
  41. }
  42. .form button:hover,.form button:active,.form button:focus {
  43.   background: #43A047;
  44. }
  45. .form .message {
  46.   margin: 15px 0 0;
  47.   color: #b3b3b3;
  48.   font-size: 12px;
  49. }
  50. .form .message a {
  51.   color: #4CAF50;
  52.   text-decoration: none;
  53. }
  54. .form .register-form {
  55.   display: none;
  56. }
  57. .container {
  58.   position: relative;
  59.   z-index: 1;
  60.   max-width: 300px;
  61.   margin: 0 auto;
  62. }
  63. .container:before, .container:after {
  64.   content: "";
  65.   display: block;
  66.   clear: both;
  67. }
  68. .container .info {
  69.   margin: 50px auto;
  70.   text-align: center;
  71. }
  72. .container .info h1 {
  73.   margin: 0 0 15px;
  74.   padding: 0;
  75.   font-size: 36px;
  76.   font-weight: 300;
  77.   color: #1a1a1a;
  78. }
  79. .container .info span {
  80.   color: #4d4d4d;
  81.   font-size: 12px;
  82. }
  83. .container .info span a {
  84.   color: #000000;
  85.   text-decoration: none;
  86. }
  87. .container .info span .fa {
  88.   color: #EF3B3A;
  89. }
  90. body {
  91.   background: #76b852; /* fallback for old browsers */
  92.   background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  93.   background: -moz-linear-gradient(right, #76b852, #8DC26F);
  94.   background: -o-linear-gradient(right, #76b852, #8DC26F);
  95.   background: linear-gradient(to left, #76b852, #8DC26F);
  96.   font-family: "Roboto", sans-serif;
  97.   -webkit-font-smoothing: antialiased;
  98.   -moz-osx-font-smoothing: grayscale;      
  99. }

表单左右摇晃的效果使用 CSS3 animation 动画来实现:

  1. .shake_effect{
  2.   -webkit-animation-name: shake;
  3.     animation-name: shake;
  4.     -webkit-animation-duration: 1s;
  5.     animation-duration: 1s;
  6. }
  7. @-webkit-keyframes shake {
  8.   from, to {
  9.     -webkit-transform: translate3d(0, 0, 0);
  10.     transform: translate3d(0, 0, 0);
  11.   }
  12.  
  13.   10%, 30%, 50%, 70%, 90% {
  14.     -webkit-transform: translate3d(-10px, 0, 0);
  15.     transform: translate3d(-10px, 0, 0);
  16.   }
  17.  
  18.   20%, 40%, 60%, 80% {
  19.     -webkit-transform: translate3d(10px, 0, 0);
  20.     transform: translate3d(10px, 0, 0);
  21.   }
  22. }
  23.  
  24. @keyframes shake {
  25.   from, to {
  26.     -webkit-transform: translate3d(0, 0, 0);
  27.     transform: translate3d(0, 0, 0);
  28.   }
  29.  
  30.   10%, 30%, 50%, 70%, 90% {
  31.     -webkit-transform: translate3d(-10px, 0, 0);
  32.     transform: translate3d(-10px, 0, 0);
  33.   }
  34.  
  35.   20%, 40%, 60%, 80% {
  36.     -webkit-transform: translate3d(10px, 0, 0);
  37.     transform: translate3d(10px, 0, 0);
  38.   }
  39. }

JavaScript

该特效中只是简单的对表单进行了一些验证,实际应用中你可以使用一些表单验证插件来对表单进行验证。在 jQuery 代码中,有两个用于验证的方法:check_login()和 check_register(),分别用于验证用户登录和用户注册。

  1. function check_login(){
  2.  var name=$("#user_name").val();
  3.  var pass=$("#password").val();
  4.  if(name=="www.htmleaf.com" && pass=="www.htmleaf.com"){
  5.   alert("登录成功!");
  6.   $("#user_name").val("");
  7.   $("#password").val("");
  8.  }
  9.  else{
  10.   $("#login_form").removeClass('shake_effect');  
  11.   setTimeout(function()
  12.   {
  13.    $("#login_form").addClass('shake_effect')
  14.   },1);  
  15.  }
  16. }
  17. function check_register(){
  18.   var name = $("#r_user_name").val();
  19.   var pass = $("#r_password").val();
  20.   var email = $("r_email").val();
  21.   if(name!="" && pass=="" && email != "")
  22.    {
  23.     alert("注册成功!");
  24.     $("#user_name").val("");
  25.     $("#password").val("");
  26.    }
  27.    else
  28.    {
  29.     $("#login_form").removeClass('shake_effect');  
  30.     setTimeout(function()
  31.     {
  32.      $("#login_form").addClass('shake_effect')
  33.     },1);  
  34.    }
  35. }

在用户点击登录和注册按钮时分别执行以上两个函数。

  1. $("#create").click(function(){
  2.   check_register();
  3.   return false;
  4. })
  5. $("#login").click(function(){
  6.   check_login();
  7.   return false;
  8. })

最后,表单的切换通过 jQuery 的 animate()方法来实现:

  1. $('.message a').click(function () {
  2.     $('form').animate({
  3.         height: 'toggle',
  4.         opacity: 'toggle'
  5.     }, 'slow');
  6. });

错误摇晃登录注册表单 jQuery 特效

已有 361 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!