html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="images/b3634a8640f73cd4f30fc680a1e26d98.ico" type="image/x-icon"><title>欢 迎 来 到 | G T D</title><link rel="stylesheet" href="css/UserLogin.css" /><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="js/vue.js"></script></head><body style="border-right:none"><!-- 整体布局 --><div class="container right-panel-active"><!-- 注册框 --><div class="container_from container_signup"><form action="pages/User_Login_True.html" class="from" id="from1"><h2 class="form_title">注册G T D</h2><input type="tel" placeholder="Phone" class="input" pattern="^1[0-9]{10}$"><input type="text" placeholder="UserName" class="input"><input type="password" placeholder="Password" class="input"><button class="btn">注册</button></form></div><!-- 登录框 --><div class="container_from container_signin" id="app"><form action="pages/User_Login_True.html" class="from" id="from2"><h2 class="form_title">欢迎登录</h2><input type="text" placeholder="输入用户名" class="input"  v-model="userName" v><input type="password" placeholder="输入密码" class="input" v-model="password"><a href="#" class="link">忘记密码?</a><button class="btn" >登录</button></form></div><!--控制注册与登录移动--><div class="container_overlay"><div class="overlay"><div class="overlay_panel overlay_left"><button class="btn"   id="signin">登录</button></div><div class="overlay_panel overlay_right"><button class="btn" id="signup">注册</button></div></div></div></div><script src="js/UserLogin.js"></script><script></script>
</body></html>

js代码

const signinBtn = document.getElementById("signin");
const signupBtn = document.getElementById("signup");
const container = document.querySelector(".container");signinBtn.addEventListener("click", () => {container.classList.remove("right-panel-active")
})signupBtn.addEventListener("click", () => {container.classList.add("right-panel-active")
})

CSS样式

/* :root根伪类--为自定义CSS属性方便我们重复使用同一个属性自定义属性使用var()进行定义*/
:root {/* 背景颜色 */--white: #e9e9e9;--gray: #333;--blue: 口 #0367a6;--lightblue: 口 #008997;/*外边框圆角属性*/--button-radius: 0.7rem;/* 登录注册框的大小 */--max-width: 758px;--max-height: 420px;/*字体样式*/font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}body {align-items: center;background-color: #e9e9e9;background: url(../images/logins.jpg);background-attachment: fixed;/* */background-position: center;background-repeat: no-repeat;background-size: cover;display: grid;height: 100vh;place-items: center;overflow:hidden
}.from_title {font-weight: 300;margin: 0;margin-bottom: 1.25rem;
}.link {color: rgb(90, 105, 238);font-size: 0.9rem;margin: 1rem 0 0 0;text-decoration: none;
}/* 注册框 */
.container {background-color: var(--white);border-radius: var(--button-radius);box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25);height: var(--max-height);max-width: var(--max-width);overflow: hidden;position: relative;width: 100%;
}.container_from {height: 100%;position: absolute;top: 0;transition: all 0.6s ease-in-out;
}/* 登录框 */
.container_signin {/*控制登录界面移动 */left: 0%;width: 50%;z-index: 2;/*控制移动顺序 */
}#rup {margin-right: 2rem;
}.container .right-panel-active .container_signin {transform: translateX(100%);
}.container_signup {left: 0;opacity: 0;width: 50%;z-index: 1;
}.container.right-panel-active .container_signup {animation: show 0.6s;opacity: 1;transform: translateX(100%);z-index: 5;
}.container_overlay {height: 100%;Left: 50%;overflow: hidden;position: absolute;top: 0;transition: transform 0.6s ease-in-out;width: 50%;z-index: 100;
}/* 设置左右透明 移动 */
.container.right-panel-active .container_overlay {transform: translateX(-100%);
}.overlay {background-color: var(--lightblue);/* background-color: #008997; */background: url(../images/login.png);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;height: 100%;left: -100%;position: relative;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 200%;
}/* 左边页面透明 移动 */
.container.right-panel-active .overlay {transform: translatex(50%);
}.overlay_panel {align-items: center;display: flex;flex-direction: Column;height: 100%;justify-content: center;position: absolute;text-align: center;top: 0;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 50%;
}/* 控制按钮移动  transform:translate(x,y)属性*//* 跳转到登录界面 */
.overlay_left {transform: translateX(-5%);
}.container .right-panel-active .overlay_left {transform: translateX(0);
}/* 跳转到注册界面 */
.overlay_right {right: 0;transform: translateX(0);
}.container .right-panel-active .overlay_right {transform: translateX(20%);
}/* 设置按钮 */
.btn {background-color: skyblue;background-image: linear-gradient(to right, skyblue, pink 65%);border-radius: 5px;margin: 0px;border: 1px solid skyblue;color:#222831;cursor: pointer;font-size: 0.8rem;font-weight: bold;letter-spacing: 0.1rem;padding: 0.9rem 4rem;/* 过渡的时间还有样式 */text-transform: uppercase;transition: transform 80ms ease-in;
}form>.btn {margin-top: 1.5rem;
}/* 鼠标放上去让按钮缩小 */
.btn:hover {transform: scale(0.95);
}/* 设置点击没有边框 */
input:focus {outline: none;border: 1px solid skyblue;
}/* 登录表单 */
.from {background-color: var(--white);display: flex;align-items: center;/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */justify-content: center;/*  flex-direction: column; 垂直显示 */flex-direction: column;padding: 0 4rem;height: 100%;text-align: center;
}/* 输入账号密码框样式设置 */
.input {background-color: #fff;border: 1px solid white; padding: 0.9rem 0.9rem;margin: 0.5rem 0;width: 100%;border-radius: 20px;
}@keyframes show {0%,50% {opacity: 0;z-index: 1;}50%,100% {opacity: 1;z-index: 5;}
}

导入

创建一个js文件写上如上代码，导入到html页面

樱花特效

 <script src="https://cangshui.net/-down/otherweb/JSCSS/yinghua.js"></script>

只是一个CDN方式直接导入到页面就可以实现樱花特效了

手机端不要樱花特效加上

<script type="text/javascript">//樱花var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); if(system.win||system.mac||system.xll){//如果是电脑$.getScript("/你放这个文件的目录/yinghua.js");}else{ //如果是手机}</script>

结束啦

html唯美登录+樱花落下实现（复制即用）相关推荐

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(1) 一. 前言回眸之间,丰盈了岁月,涟漪了思绪,轻轻落笔,不写伤痕,不写仇怨,只写岁月经历领悟后 ...
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(3)
别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(3) 目录款式三:心形实时显示认识多长时间桃花飞舞(猫咪)款 1.拷贝完整源代码 2.拷贝完整js ...
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码（4）
别具一格,独此一家,原创唯美浪漫情人节表白专辑不一样的惊喜哦~!(html5,css3,svg)表白爱心代码(复制就可用)(4) 目录款式四:时光的记忆款 1.拷贝完整源代码 2.更新时光盒所显示 ...
手把手教你制作一篇浪漫唯美的樱花公众号推文
三月是樱花盛开的季节,每年到了樱花盛开的时候, 人们都会选择去樱花胜地去观赏漫天樱花.其中以日本的樱花最为出名,在国内以武汉的樱花最为人熟知.樱花之美美在生命顽强,美在形态别样,没在层线柔和却又不失空 ...
html+css实现唯美简洁登录页面
1.简介本案例是html和css实现的唯美简洁的登录界面.纯粹个人一时兴起所写.可以适用于个人博客登录以及其他系统的登录界面,登录title可以随时修改. 2.先看效果. 3.上代码. 代码复制粘贴 ...
计算机音乐花之舞谱,Flower Dance（花之舞）简谱 DJ OKAWARI 空灵、自然、唯美的花之舞，花儿舞了，我醉了。...
DjOkawari,的作曲风格一向是空灵却又自然的.<FlowerDance>作为广为人知的一首曲子非常完美的体现出来了他自己的风格, 它将流行曲的跳跃激昂与古典乐曲的优美完美的结合在一起 ...
C#winform实现学生人员信息管理系统，可视化查看人员信息，一键修改、删除等，唯美登陆界面
使用展示: 一.登陆.注册界面如果是新用户没有注册过的话,点击注册按钮注册.如果已经注册了,则直接输入账号密码登陆即可. 二.人员信息登记点击选择头像可选择头像,登记信息后点击保存信息按钮即可. ...
梦幻西游服务器每周几维护,梦幻西游5月6日维护公告：唯美版地图不再更新
为保证服务器的运行稳定和服务质量,<梦幻西游2>所有服务器将于2014年5月6日上午8:00停机,进行每周例行的维护工作.预计维护时间为上午8:00-9:30.如果在预定时间内无法完成维护 ...
用计算机术语写毕业寄语,毕业寄语唯美句子（精选55句）
毕业寄语唯美句子(精选55句) 在我们平凡的日常里,大家总少不了要接触或使用寄语吧,寄语的文体没有严格限制,可以是诗歌.散文或者随笔.你会写寄语吗?下面是小编精心整理的毕业寄语唯美句子(精选55句), ...

html唯美登录+樱花落下实现（复制即用）

html

js代码

CSS样式

导入

樱花特效

html唯美登录+樱花落下实现（复制即用）相关推荐

最新文章

热门文章