一：源码获取

这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面，这里我将源码资源分享给大家，大家可以直接免费下载使用哦，没有 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 为必写参数 ！！！
参数 params speed easing fn
含义 写想要更改的样式属性，以对象形式传递，必写 速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值 用来指定特定的过度效果，默认为 swing，可换为 linear 回调函数，在动画执行完后调用动画函数内的内容
  • 注意以对象形式传入要改变的属性，并且设置动画函数的必须是元素，不能是文档，例如让整个页面移动时，不能给 $(document) 设置动画函数，而应该给 $('html') 设置动画函数，这点很重要！！！！！！！！！！
document.addEventListener('DOMContentLoaded',function(event){document.addEventListener('selectstart',function(event){event.preventDefault();})document.addEventListener('contextmenu',function(event){event.preventDefault();})var random_box=document.querySelector('.random');var btn=document.querySelector('.reset');var wirte=document.querySelector('.write');function random(min,max){return Math.floor(Math.random()*(max-min+1))+min;}btn.addEventListener('click',function(){btn.style.backgroundColor='#fff';window.setTimeout(function(event){btn.style.backgroundColor='rgb(255, 224, 146)';},50)var randoms=random(1000,9999);console.log(randoms);random_box.innerHTML=randoms;})
})
$(function(){$('.change-register-button').on('click',function(){$('.login').animate({'left':'240px'},400,function(){$('.login').css({'display':'none','left':'60px'})$('.change-register-box').css('display','none')$('.register').css('display','block')$('.change-login-box').css('display','block')})})$('.change-login-button').on('click',function(){$('.register').animate({'right':'240px'},400,function(){$('.register').css({'display':'none','right':'60px'})$('.change-login-box').css('display','none')$('.login').css('display','block')$('.change-register-box').css('display','block')})})
})

四：完整代码

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>login</title><link rel="stylesheet" href="./login.css"><script src="./jQuery.js"></script><script src="./login.js"></script>
</head>
<body><div class="background">
<!-- 登录 --><div class="login"><p class="login-value">LOG IN</p><form action=""><input type="text" class="login-num" placeholder="请输入账号"><input type="password" class="login-pwd" placeholder="请输入密码"><input type="button" value="忘记密码？" class="forget"><input type="submit" value="登录" class="login-button"></form></div><div class="change-register-box"><p class="a">还没有账户？</p><p class="b">点击加入我们吧</p><button class="change-register-button">SIGN UP &nbsp;></button></div>
<!-- 注册 --><div class="register"><p class="signup-value">SIGN UP</p><button class="reset">重新获取</button><form action=""><input type="text" class="signup-num" placeholder="请输入账号"><input type="password" class="signup-pwd" placeholder="请输入密码"><input type="password" class="signup-repwd" placeholder="再次输入确认密码"><div class="random">????</div><input type="text" class="write" placeholder="请输入验证码"><input type="submit" value="注册" class="signup-button"></form></div><div class="change-login-box"><p class="c">欢迎加入</p><p class="d">快去登陆看看吧</p><button class="change-login-button"><&nbsp; LOG IN</button></div></div>
</body>
</html>

CSS代码：

body{background: url(./img/src=http___pic1.win4000.com_wallpaper_2020-10-12_5f83b7c13d0b9.jpg&refer=http___pic1.win4000.webp);background-size: 110% ,110%;
}
.background{width: 900px;height: 400px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: rgba(10, 10, 10, 0.598);
}
/* 登录框 */
.login{position: absolute;top: -12%;left: 60px;width: 600px;height: 500px;background-color: rgb(249, 249, 249);z-index: 10;box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);/* display: none; */
}
.login-value{width: 600px;font-size: 40px;font-weight: bold;color: rgb(255, 108, 108);padding-left: 60px;margin-top: 90px;
}
.login-num{width: 485px;height: 50px;outline: none;margin-top: -5px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.login-pwd{width: 485px;height: 50px;outline: none;margin-top: 30px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.forget{position: absolute;bottom: 90px;left: 60px;width: 220px;height: 60px;border: 1.5px solid rgb(151, 151, 151);background-color:transparent;font-size: 18px ;font-weight: bold;letter-spacing: 2px;color: rgb(113, 113, 113);
}
.forget:hover{background-color: rgb(235, 235, 235);
}
.login-button{position: absolute;bottom: 90px;right: 60px;width: 220px;height: 60px;border: none;background-color:  rgb(222, 59, 59);;font-size: 20px ;font-weight: bold;letter-spacing: 10px;color: rgb(255, 255, 255);text-shadow: 1px 1px 1px rgb(138, 138, 138);
}
.login-button:hover{background-color: rgb(199, 38, 38);
}
/* 切换注册框的盒子 */
.change-register-box{position: absolute;right: 0px;width: 240px;height: 400px;background-color: transparent;/* display: none; */
}
.a{position: absolute;top: 90px;left: 62px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.846);letter-spacing: 2px;
}
.b{position: absolute;top: 140px;left: 46px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.858);letter-spacing: 2px;
}
.change-register-button{position: absolute;left: 46px;bottom: 120px;width: 140px;height: 50px;border: 1.5px solid #fff;background-color: transparent;letter-spacing: 2px;color: #fff;font-size: 16px;font-weight: bold;border-radius: 5px;
}
.change-register-button:hover{border: 1.5px solid rgb(217, 217, 217);color: rgb(217, 217, 217);
}
/* 注册框 */
.register{position: absolute;top: -12%;right: 60px;width: 600px;height: 500px;background-color: rgb(249, 249, 249);display: none;z-index: 10;box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);
}.change-login-box{position: absolute;left: 0;width: 240px;height: 400px;background-color: transparent;display: none;
}
.signup-value{width: 600px;font-size: 40px;font-weight: bold;color: rgb(255, 108, 108);padding-left: 40px;margin-top: 30px;
}
.signup-num{width: 485px;height: 50px;outline: none;margin-top: -18px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.signup-pwd{width: 485px;height: 50px;outline: none;margin-top: 15px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.signup-repwd{width: 485px;height: 50px;outline: none;margin-top: 15px;margin-left: 60px;box-sizing: border-box;border-top: none;border-left: none;border-right: none;border-bottom: 2px solid rgb(182, 182, 182);background-color: transparent;font-size: 20px;color: grey;
}
.random{position: absolute;top: 305px;left: 60px;width: 110px;height: 47px;border: 1px solid black;line-height :47px; text-align: center;font-size: 27px;font-weight: bold;letter-spacing: 3px;background-color: rgb(221, 246, 255);color: grey;
}
.reset{position: absolute;top: 305px;left: 186px;width: 150px;height: 47px;border: 1px solid black;line-height :47px; text-align: center;font-size: 16px;font-weight:600;letter-spacing: 3px;background-color: rgb(255, 224, 146);border-radius: 6px;color: rgb(92, 92, 92);/* text-shadow: 2px 1px 1px grey; */
}
.write{position: absolute;top: 305px;right: 58px;width: 180px;height: 47px;border: 1px solid black;outline: none;font-size: 22px;padding-left: 10px;
}
.signup-button{position: absolute;bottom: 50px;right: 60px;width: 482px;height: 60px;border: none;background-color:  rgb(222, 59, 59);;font-size: 20px ;font-weight: bold;letter-spacing: 15px;color: rgb(255, 255, 255);text-shadow: 1px 1px 1px rgb(138, 138, 138);
}
.signup-button:hover{background-color: rgb(199, 38, 38);
}
.c{position: absolute;top: 90px;left: 79px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.846);letter-spacing: 2px;
}
.d{position: absolute;top: 140px;left: 46px;font-size: 18px;font-weight: bold;color: rgba(255, 255, 255, 0.858);letter-spacing: 2px;
}
.change-login-button{position: absolute;left: 46px;bottom: 120px;width: 140px;height: 50px;border: 1.5px solid #fff;background-color: transparent;letter-spacing: 2px;color: #fff;font-size: 16px;font-weight: bold;border-radius: 5px;
}
.change-login-button:hover{border: 1.5px solid rgb(217, 217, 217);color: rgb(217, 217, 217);
}

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

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

  1. 炫酷登录注册 完整功能版【本地存储+JS+HTML+CSS+jQuery】

    一:源码获取

  2. android 登录注册动画,Android开发（14）——动画实战：炫酷登录

    本节内容 1.第三方库实现虚化 2.添加输入框和按钮 3.按钮状态 4.键盘隐藏 5.监听焦点改变的事件 6.手臂旋转动画 7.手掌和手臂动画 Demo简介 1.做一个炫酷登录的界面. image.p ...

  3. 【HTML+CSS】高级、简约的移动端登录注册界面，HR看了直呼里面请

    一.静态页面index.html <!DOCTYPE html> <html lang="en"><head><meta charset= ...

  4. java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...

    承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...

  5. python做一个登录注册界面_Python 实现简单的登录注册界面

    Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...

  6. 超酷超实用的登录/注册界面，保你看完不后悔（无套路提供源码）

    文章目录 概述 效果(背景图片可改变) 代码 index.html style.css index.js background.jpg(可以改,同名) 概述 应读者要求,蒟蒻君这次写了一个登录/注册的 ...

  7. android打开小屏登录画面,Android炫酷登录界面

    来看一波图片吧 CoverEyeLogin.gif 动画效果介绍 1.当用户输入用户名时,小猫头鹰的眼睛是没有被捂住的 2.当用户输入密码时,小猫头鹰会用手捂住眼睛 3.如果用户名和密码都已经输入完毕 ...

  8. python实现用户登录注册界面_实现前后端登录注册界面

    本篇博客讲解如何实现前后端的简单登录注册界面,后端代码由node.js实现,主要阐述登录注册时网页工作原理.感兴趣的同学可以参考一下. 注册界面 功能: 判断用户是否输入邮箱,密码,验证密码(前端判断 ...

  9. Android音乐播放器（二）登录注册界面

    这是去年大二做的一个简单音乐播放器项目:是尽可能模仿酷狗音乐写的,具体实现的功能如下: 1:启动动画:点击运行程序会出现一个两秒钟的视频,类似酷狗音乐的启动动画一样,非常可观! 2:登录注册界面:输入 ...

最新文章

  1. 大数据时代，一名优秀的开发者应具备怎样的特质？
  2. python3.8图片_python3.8.3官方中文文档[PDF][CHM][31.14MB]
  3. Redis常见配置redis.conf
  4. 深入理解Delete（JavaScript）
  5. 前端学习（2583）：生态圈练习解答下
  6. 前端提示框定位在鼠标的右下_前端基础高频面试题(更新中)
  7. jsp ejb mysql_关于UTF-8 JBoss,JSP,EJB,MySQL,STRUTS的中文处理方案
  8. 垃圾邮件是什么样的邮件
  9. 迷你MVVM框架 avalonjs 0.71发布
  10. phpcms 指定id范围 调用_Dubbogo 源码笔记（二）客户端调用过程
  11. 时间序列分析：非平稳序列的确定性分析
  12. python xlwt_Python模块xlwt对excel进行写入操作
  13. c语言的运算符有那哪些,c语言逻辑运算符有哪些
  14. 上网行为管理软件的功能
  15. unity shader projector使用
  16. Java集合框架是什么？说出一些集合框架的优点？
  17. C++类的成员函数(在类外定义成员函数)
  18. 亲测快捷高效的编写测试用例方法
  19. 计算机学院学生工作办公室,上海交通大学-电子信息与电气工程学院-学生工作办公室...
  20. 优思学院｜六西格玛黑带精华36考试试题

热门文章

  1. 无代码开发工具推荐丨三叠云
  2. Android 输入事件一撸到底之View接盘侠（3）
  3. 谁在“接盘”造车新势力？
  4. 闭关修炼---网络原理之IP协议
  5. [OOD设计] - Black Jack Game (21点)
  6. c语言blackjack设计思路,blackjack基本策略.doc
  7. duration缩写_关于光端机专业名词的中英文及缩写？？
  8. 互联网公司招聘，你需要注意这四点
  9. net has only one pin的解决方法
  10. JS一百只鸡卖一百块钱，公鸡5元，母鸡3元，三只小鸡一元