帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 简单的html用户登录注册页面样式
简单的html用户登录注册页面样式
浏览:1106次
-
评论:0次
-
发布时间:2022-05-19
Html
Css
Js
注册
注册
登录
忘记密码?
登录
登录
注册
:root { /* 颜色 */ --white:#e9e9e9; --gray:#333; --blue:#095c91; --blue-r:#315a7491; --lightblue:#0393a3; /* 圆角 */ --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:var(--white); background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover; display:grid; height:100vh; place-items:center; } .form_title { font-weight:300; margin:0; margin-bottom:1.25rem; } .link { color:var(--gray); font-size:0.9rem; margin:1.5rem 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),0 0.7rem 0.7rem rgba(0,0,0,0.22); height:var(--max-height); max-width:var(--max-width); overflow:hidden; position:relative; width:100%; } .container_form { height:100%; position:absolute; top:0; transition:all 0.6s ease-in-out; } .container--signin { left:0; width:50%; z-index:5; } .container.right-panel-active .container--signin { transform:translateX(100%); } .container--signup { left:0; opacity:0; width:50%; z-index:4; } .container.right-panel-active .container--signup { -webkit-animation:show 0.6s; animation:show 0.6s; opacity:1; transform:translateX(100%); z-index:8; } .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:rgba(255,255,255,0.25); 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%; } .overlay--left { transform:translateX(-20%); } .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:var(--blue); background-image:linear-gradient(90deg,var(--blue) 0%,var(--lightblue) 74%); border-radius:20px; border:0.2px solid var(--blue-r); color:var(--white); 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:active { transform:scale(0.95); } .btn:focus { outline:none; } .form { background-color:var(--white); display:flex; align-items:center; justify-content:center; flex-direction:column; padding:0 3rem; height:100%; text-align:center; } .input { background-color:#fff; border:none; padding:0.9rem 0.9rem; margin:0.5rem 0; width:100%; } @-webkit-keyframes show { 0%,49.99% { opacity:0; z-index:4; } 50%,100% { opacity:1; z-index:8; } }@keyframes show { 0%,49.99% { opacity:0; z-index:4; } 50%,100% { opacity:1; z-index:8; } }.slidershow { position:absolute; width:100vw; height:100vh; overflow:hidden; } .slidershow--image { position:absolute; width:100%; height:100%; background:no-repeat 50% 50%; background-size:cover; -webkit-animation-name:kenburns; animation-name:kenburns; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-duration:16s; animation-duration:16s; opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } .slidershow--image:nth-child(1) { -webkit-animation-name:kenburns-1; animation-name:kenburns-1; z-index:3; } .slidershow--image:nth-child(2) { -webkit-animation-name:kenburns-2; animation-name:kenburns-2; z-index:2; } .slidershow--image:nth-child(3) { -webkit-animation-name:kenburns-3; animation-name:kenburns-3; z-index:1; } .slidershow--image:nth-child(4) { -webkit-animation-name:kenburns-4; animation-name:kenburns-4; z-index:0; } @-webkit-keyframes kenburns-1 { 0% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 1.5625% { opacity:1; } 23.4375% { opacity:1; } 26.5625% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } 100% { opacity:0; -webkit-transform:scale(1.2); transform:scale(1.2); } 98.4375% { opacity:0; -webkit-transform:scale(1.21176); transform:scale(1.21176); } 100% { opacity:1; } }@keyframes kenburns-1 { 0% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 1.5625% { opacity:1; } 23.4375% { opacity:1; } 26.5625% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } 100% { opacity:0; -webkit-transform:scale(1.2); transform:scale(1.2); } 98.4375% { opacity:0; -webkit-transform:scale(1.21176); transform:scale(1.21176); } 100% { opacity:1; } }@-webkit-keyframes kenburns-2 { 23.4375% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 26.5625% { opacity:1; } 48.4375% { opacity:1; } 51.5625% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } 100% { opacity:0; -webkit-transform:scale(1.2); transform:scale(1.2); } }@keyframes kenburns-2 { 23.4375% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 26.5625% { opacity:1; } 48.4375% { opacity:1; } 51.5625% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } 100% { opacity:0; -webkit-transform:scale(1.2); transform:scale(1.2); } }@-webkit-keyframes kenburns-3 { 48.4375% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 51.5625% { opacity:1; } 73.4375% { opacity:1; } 76.5625% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } 100% { opacity:0; -webkit-transform:scale(1.2); transform:scale(1.2); } }@keyframes kenburns-3 { 48.4375% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 51.5625% { opacity:1; } 73.4375% { opacity:1; } 76.5625% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } 100% { opacity:0; -webkit-transform:scale(1.2); transform:scale(1.2); } }@-webkit-keyframes kenburns-4 { 73.4375% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 76.5625% { opacity:1; } 98.4375% { opacity:1; } 100% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } }@keyframes kenburns-4 { 73.4375% { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2); } 76.5625% { opacity:1; } 98.4375% { opacity:1; } 100% { opacity:0; -webkit-transform:scale(1); transform:scale(1); } }
const signInBtn = document.getElementById("signIn"); const signUpBtn = document.getElementById("signUp"); const firstForm = document.getElementById("form1"); const secondForm = document.getElementById("form2"); const container = document.querySelector(".container"); signInBtn.addEventListener("click", () => { container.classList.remove("right-panel-active"); }); signUpBtn.addEventListener("click", () => { container.classList.add("right-panel-active"); }); firstForm.addEventListener("submit", (e) => e.preventDefault()); secondForm.addEventListener("submit", (e) => e.preventDefault());
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>简单的html用户登录注册页面样式-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:一个简单的登录注册页面
一个用html+css+js实现的简单登录注册页面
table表格动态分页显示列表数据
点击弹出模态框可拖动效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1106
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值