• 炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

    一：源码获取

    这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面，这里我将源码资源分享给大家，大家可以直接免费下载使用哦，没有 vip 的小伙伴找我私聊发送"登录注册"即可我给你发文件，此登录注册框放在任何管理系统都是非常炫酷的点睛之笔！

    一款非常炫酷登录注册页面-Javascript文档类资源-CSDN下载一个非常炫酷的的登录注册页面，登录注册切换由jQuery实现，原理简单易懂并且十几行代码就完成了更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_52212950/85799335

    二：效果展示

    登录页面： 

     注册页面：

    动态切换效果：切换时采用了一种滑动切换的效果

    三：实现代码：

    此效果动态的实现原理也是非常简单的，使用 jQuery 封装好的动画函数即可，以下是其功能实现的js代码，使用了 jQuery 封装好的 animate 动画函数，在点击切换注册或登录框时就会调用 animate，其内部回调函数内容为其登录和注册框哪个显示哪个不显示，从而完成一种视觉上的切换效果，其实归根到底还是 display 的显隐切换，有 jQuery 基础 小伙伴就不难理解。

    • 在这里在带领大家复习一下 animate 动画函数
    • animate ( params , speed ,  easing ,  fn )       params 为必写参数 ！！！
    参数paramsspeedeasingfn
    含义写想要更改的样式属性，以对象形式传递，必写速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear回调函数，在动画执行完后调用动画函数内的内容
    • 注意以对象形式传入要改变的属性，并且设置动画函数的必须是元素，不能是文档，例如让整个页面移动时，不能给 $(document) 设置动画函数，而应该给 $('html') 设置动画函数，这点很重要！！！！！！！！！！
    1. document.addEventListener('DOMContentLoaded',function(event){
    2.     document.addEventListener('selectstart',function(event){
    3.         event.preventDefault();
    4.     })
    5.     document.addEventListener('contextmenu',function(event){
    6.         event.preventDefault();
    7.     })
    8.     var random_box=document.querySelector('.random');
    9.     var btn=document.querySelector('.reset');
    10.     var wirte=document.querySelector('.write');
    11.     function random(min,max){
    12.          return Math.floor(Math.random()*(max-min+1))+min;
    13.     }
    14.     btn.addEventListener('click',function(){
    15.         btn.style.backgroundColor='#fff';
    16.         window.setTimeout(function(event){
    17.             btn.style.backgroundColor='rgb(255, 224, 146)';
    18.         },50)
    19.         var randoms=random(1000,9999);
    20.         console.log(randoms);
    21.         random_box.innerHTML=randoms;
    22.     })
    23. })
    24. $(function(){
    25.       $('.change-register-button').on('click',function(){
    26.             $('.login').animate(
    27.                 {
    28.                     'left':'240px'
    29.                 },400,function(){
    30.                     $('.login').css({'display':'none',
    31.                                           'left':'60px'})
    32.                     $('.change-register-box').css('display','none')
    33.                     $('.register').css('display','block')
    34.                     $('.change-login-box').css('display','block')
    35.                 }
    36.             )
    37.       })
    38.       $('.change-login-button').on('click',function(){
    39.         $('.register').animate(
    40.             {
    41.                 'right':'240px'
    42.             },400,function(){
    43.                 $('.register').css({'display':'none',
    44.                                             'right':'60px'})
    45.                 $('.change-login-box').css('display','none')
    46.                 $('.login').css('display','block')
    47.                 $('.change-register-box').css('display','block')
    48.             }
    49.         )
    50.   })
    51. })

    四：完整代码

    HTML 代码:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>login</title>
    8.     <link rel="stylesheet" href="./login.css">
    9.     <script src="./jQuery.js"></script>
    10.     <script src="./login.js"></script>
    11. </head>
    12. <body>
    13.      <div class="background">
    14. <!-- 登录 -->
    15.             <div class="login">
    16.                   <p class="login-value">LOG IN</p>
    17.                   <form action="">
    18.                          <input type="text" class="login-num" placeholder="请输入账号">
    19.                          <input type="password" class="login-pwd" placeholder="请输入密码">
    20.                          <input type="button" value="忘记密码？" class="forget">
    21.                          <input type="submit" value="登录" class="login-button">
    22.                   </form>
    23.             </div>
    24.             <div class="change-register-box">
    25.                <p class="a">还没有账户？</p>
    26.                <p class="b">点击加入我们吧</p>
    27.                  <button class="change-register-button">SIGN UP &nbsp;></button>
    28.             </div>
    29. <!-- 注册 -->
    30.             <div class="register">
    31.                <p class="signup-value">SIGN UP</p>
    32.                <button class="reset">重新获取</button>
    33.                <form action="">
    34.                       <input type="text" class="signup-num" placeholder="请输入账号">
    35.                       <input type="password" class="signup-pwd" placeholder="请输入密码">
    36.                       <input type="password" class="signup-repwd" placeholder="再次输入确认密码">
    37.                       <div class="random">????</div>
    38.                       <input type="text" class="write" placeholder="请输入验证码">
    39.                       <input type="submit" value="注册" class="signup-button">
    40.                </form>
    41.            </div>
    42.            <div class="change-login-box">
    43.                  <p class="c">欢迎加入</p>
    44.                  <p class="d">快去登陆看看吧</p>
    45.                  <button class="change-login-button"><&nbsp; LOG IN</button>
    46.            </div>
    47.      </div>
    48. </body>
    49. </html>

    CSS代码：

    1. body{
    2.     background: url(./img/src=http___pic1.win4000.com_wallpaper_2020-10-12_5f83b7c13d0b9.jpg&refer=http___pic1.win4000.webp);
    3.     background-size: 110% ,110%;
    4. }
    5. .background{
    6.      width: 900px;
    7.      height: 400px;
    8.      position: absolute;
    9.      left: 50%;
    10.      top: 50%;
    11.      transform: translate(-50%,-50%);
    12.      background-color: rgba(10, 10, 10, 0.598);
    13. }
    14. /* 登录框 */
    15. .login{
    16.     position: absolute;
    17.     top: -12%;
    18.     left: 60px;
    19.     width: 600px;
    20.     height: 500px;
    21.     background-color: rgb(249, 249, 249);
    22.     z-index: 10;
    23.     box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);
    24.     /* display: none; */
    25. }
    26. .login-value{
    27.     width: 600px;
    28.     font-size: 40px;
    29.     font-weight: bold;
    30.     color: rgb(255, 108, 108);
    31.     padding-left: 60px;
    32.     margin-top: 90px;
    33. }
    34. .login-num{
    35.     width: 485px;
    36.     height: 50px;
    37.     outline: none;
    38.     margin-top: -5px;
    39.     margin-left: 60px;
    40.     box-sizing: border-box;
    41.     border-top: none;
    42.     border-left: none;
    43.     border-right: none;
    44.     border-bottom: 2px solid rgb(182, 182, 182);
    45.     background-color: transparent;
    46.     font-size: 20px;
    47.     color: grey;
    48. }
    49. .login-pwd{
    50.     width: 485px;
    51.     height: 50px;
    52.     outline: none;
    53.     margin-top: 30px;
    54.     margin-left: 60px;
    55.     box-sizing: border-box;
    56.     border-top: none;
    57.     border-left: none;
    58.     border-right: none;
    59.     border-bottom: 2px solid rgb(182, 182, 182);
    60.     background-color: transparent;
    61.     font-size: 20px;
    62.     color: grey;
    63. }
    64. .forget{
    65.     position: absolute;
    66.     bottom: 90px;
    67.     left: 60px;
    68.      width: 220px;
    69.      height: 60px;
    70.      border: 1.5px solid rgb(151, 151, 151);
    71.      background-color:transparent;
    72.      font-size: 18px ;
    73.      font-weight: bold;
    74.      letter-spacing: 2px;
    75.      color: rgb(113, 113, 113);
    76. }
    77. .forget:hover{
    78.     background-color: rgb(235, 235, 235);
    79. }
    80. .login-button{
    81.     position: absolute;
    82.     bottom: 90px;
    83.     right: 60px;
    84.      width: 220px;
    85.      height: 60px;
    86.      border: none;
    87.      background-color:  rgb(222, 59, 59);;
    88.      font-size: 20px ;
    89.      font-weight: bold;
    90.      letter-spacing: 10px;
    91.      color: rgb(255, 255, 255);
    92.      text-shadow: 1px 1px 1px rgb(138, 138, 138);
    93. }
    94. .login-button:hover{
    95.     background-color: rgb(199, 38, 38);
    96. }
    97. /* 切换注册框的盒子 */
    98. .change-register-box{
    99.     position: absolute;
    100.     right: 0px;
    101.     width: 240px;
    102.     height: 400px;
    103.     background-color: transparent;
    104.     /* display: none; */
    105. }
    106. .a{
    107.     position: absolute;
    108.     top: 90px;
    109.     left: 62px;
    110.     font-size: 18px;
    111.     font-weight: bold;
    112.     color: rgba(255, 255, 255, 0.846);
    113.     letter-spacing: 2px;
    114. }
    115. .b{
    116.     position: absolute;
    117.     top: 140px;
    118.     left: 46px;
    119.     font-size: 18px;
    120.     font-weight: bold;
    121.     color: rgba(255, 255, 255, 0.858);
    122.     letter-spacing: 2px;
    123. }
    124. .change-register-button{
    125.       position: absolute;
    126.       left: 46px;
    127.       bottom: 120px;
    128.       width: 140px;
    129.       height: 50px;
    130.       border: 1.5px solid #fff;
    131.       background-color: transparent;
    132.       letter-spacing: 2px;
    133.       color: #fff;
    134.       font-size: 16px;
    135.       font-weight: bold;
    136.       border-radius: 5px;
    137. }
    138. .change-register-button:hover{
    139.     border: 1.5px solid rgb(217, 217, 217);
    140.     color: rgb(217, 217, 217);
    141. }
    142. /* 注册框 */
    143. .register{
    144.     position: absolute;
    145.     top: -12%;
    146.     right: 60px;
    147.     width: 600px;
    148.     height: 500px;
    149.     background-color: rgb(249, 249, 249);
    150.     display: none;
    151.     z-index: 10;
    152.     box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);
    153. }
    154.  
    155. .change-login-box{
    156.     position: absolute;
    157.     left: 0;
    158.     width: 240px;
    159.     height: 400px;
    160.     background-color: transparent;
    161.     display: none;
    162. }
    163. .signup-value{
    164.     width: 600px;
    165.     font-size: 40px;
    166.     font-weight: bold;
    167.     color: rgb(255, 108, 108);
    168.     padding-left: 40px;
    169.     margin-top: 30px;
    170. }
    171. .signup-num{
    172.     width: 485px;
    173.     height: 50px;
    174.     outline: none;
    175.     margin-top: -18px;
    176.     margin-left: 60px;
    177.     box-sizing: border-box;
    178.     border-top: none;
    179.     border-left: none;
    180.     border-right: none;
    181.     border-bottom: 2px solid rgb(182, 182, 182);
    182.     background-color: transparent;
    183.     font-size: 20px;
    184.     color: grey;
    185. }
    186. .signup-pwd{
    187.     width: 485px;
    188.     height: 50px;
    189.     outline: none;
    190.     margin-top: 15px;
    191.     margin-left: 60px;
    192.     box-sizing: border-box;
    193.     border-top: none;
    194.     border-left: none;
    195.     border-right: none;
    196.     border-bottom: 2px solid rgb(182, 182, 182);
    197.     background-color: transparent;
    198.     font-size: 20px;
    199.     color: grey;
    200. }
    201. .signup-repwd{
    202.     width: 485px;
    203.     height: 50px;
    204.     outline: none;
    205.     margin-top: 15px;
    206.     margin-left: 60px;
    207.     box-sizing: border-box;
    208.     border-top: none;
    209.     border-left: none;
    210.     border-right: none;
    211.     border-bottom: 2px solid rgb(182, 182, 182);
    212.     background-color: transparent;
    213.     font-size: 20px;
    214.     color: grey;
    215. }
    216. .random{
    217.     position: absolute;
    218.     top: 305px;
    219.     left: 60px;
    220.     width: 110px;
    221.     height: 47px;
    222.     border: 1px solid black;
    223.     line-height :47px; 
    224.     text-align: center;
    225.     font-size: 27px;
    226.     font-weight: bold;
    227.     letter-spacing: 3px;
    228.     background-color: rgb(221, 246, 255);
    229.     color: grey;
    230. }
    231. .reset{
    232.     position: absolute;
    233.     top: 305px;
    234.     left: 186px;
    235.     width: 150px;
    236.     height: 47px;
    237.     border: 1px solid black;
    238.     line-height :47px; 
    239.     text-align: center;
    240.     font-size: 16px;
    241.     font-weight:600;
    242.     letter-spacing: 3px;
    243.     background-color: rgb(255, 224, 146);
    244.     border-radius: 6px;
    245.     color: rgb(92, 92, 92);
    246.     /* text-shadow: 2px 1px 1px grey; */
    247. }
    248. .write{
    249.     position: absolute;
    250.     top: 305px;
    251.      right: 58px;
    252.     width: 180px;
    253.     height: 47px;
    254.     border: 1px solid black;
    255.     outline: none;
    256.     font-size: 22px;
    257.     padding-left: 10px;
    258. }
    259. .signup-button{
    260.     position: absolute;
    261.     bottom: 50px;
    262.     right: 60px;
    263.      width: 482px;
    264.      height: 60px;
    265.      border: none;
    266.      background-color:  rgb(222, 59, 59);;
    267.      font-size: 20px ;
    268.      font-weight: bold;
    269.      letter-spacing: 15px;
    270.      color: rgb(255, 255, 255);
    271.      text-shadow: 1px 1px 1px rgb(138, 138, 138);
    272. }
    273. .signup-button:hover{
    274.     background-color: rgb(199, 38, 38);
    275. }
    276. .c{
    277.     position: absolute;
    278.     top: 90px;
    279.     left: 79px;
    280.     font-size: 18px;
    281.     font-weight: bold;
    282.     color: rgba(255, 255, 255, 0.846);
    283.     letter-spacing: 2px;
    284. }
    285. .d{
    286.     position: absolute;
    287.     top: 140px;
    288.     left: 46px;
    289.     font-size: 18px;
    290.     font-weight: bold;
    291.     color: rgba(255, 255, 255, 0.858);
    292.     letter-spacing: 2px;
    293. }
    294. .change-login-button{
    295.       position: absolute;
    296.       left: 46px;
    297.       bottom: 120px;
    298.       width: 140px;
    299.       height: 50px;
    300.       border: 1.5px solid #fff;
    301.       background-color: transparent;
    302.       letter-spacing: 2px;
    303.       color: #fff;
    304.       font-size: 16px;
    305.       font-weight: bold;
    306.       border-radius: 5px;
    307. }
    308. .change-login-button:hover{
    309.     border: 1.5px solid rgb(217, 217, 217);
    310.     color: rgb(217, 217, 217);
    311. }

    创作不易，你的支持就是我最大的动力！

  • 相关阅读:
    2022CTF培训（五）字符串混淆进阶&代码自解密
    思科华为交换设备安全配置命令对比
    爬虫全网抓取
    线性调频Z变换(CZT)
    将conda环境打包成docker步骤
    02.Vue2.x Vue模版语法
    程序打包教程
    java swing 设计心得--窗体和面板
    DeepWalk: Online Learning of Social Representations（2014 ACM SIGKDD）
    Vue课程61-判断用户添加的数据是否为空
  • 原文地址：https://blog.csdn.net/weixin_52212950/article/details/125483953