您正在使用 IPV4 [3.236.145.153] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中      
[公益] 地球是我家,绿化靠大家      
2024年 妇女节 010
2024年 清明节 037
2025年 元 旦 309
2025年 春 节 337
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
HTML+CSS实现炫酷登录切换的项目实践
内容摘要: Codedivclass='container'!--注册--divclass='container-formcontainer-signup'formaction='#'class='form'id='form1'h2class='form-title'注册账号/h2inputtype='text'placeholder='User'class='inpu......
Code

<divclass="container">

<!--注册-->

<divclass="container-formcontainer-signup">

<formaction="#"class="form"id="form1">

<h2class="form-title">注册账号</h2>

<inputtype="text"placeholder="User"class="input"/>

<inputtype="email"placeholder="Email"class="input"/>

<inputtype="password"placeholder="Password"class="input"/>

<buttontype="button"class="btn">点击注册</button>

</form>

</div>

<!--登录-->

<divclass="container-formcontainer-signin">

<formaction="#"class="form"id="form2">

<h2class="form-title">欢迎登录</h2>

<inputtype="email"placeholder="Email"class="input"/>

<inputtype="password"placeholder="Password"class="input"/>

<ahref="#"class="link">忘记密码?</a>

<buttontype="button"class="btn">登录</button>

</form>

</div>

<!--叠加层部分-->

<divclass="container-overlay">

<divclass="overlay">

<divclass="overlay-paneloverlay-left">

<buttonclass="btn"id="signIn">

已有账号,直接登录

</button>

</div>

<divclass="overlay-paneloverlay-right">

<buttonclass="btn"id="signUp">

没有账号,点击注册

</button>

</div>

</div>

</div>

</div>

body{

height:100vh;

background:#e7e7e7url("./img/background.jpg")centerno-repeatfixed;

background-size:cover;

backdrop-filter:blur(5px);

display:flex;

justify-content:center;

align-items:center;

}

/*主体div样式*/

.container{

background-color:#e7e7e7;

border-radius:0.7rem;

box-shadow:00.9rem1.7remrgba(0,0,0,0.25),

00.7rem0.7remrgba(0,0,0,0.22);

height:420px;

max-width:750px;

overflow:hidden;

position:relative;

width:100%;

}

/*登录、注册框部分*/

.container-form{

height:100%;

position:absolute;

top:0;

transition:all0.6sease-in-out;

}

/*登录框-默认层级高*/

.container-signin{

left:0;

width:50%;

z-index:2;

}

/*注册框-默认层级低-透明度0*/

.container-signup{

left:0;

opacity:0;

width:50%;

z-index:1;

}

/*表单样式*/

.form{

background-color:#e7e7e7;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

padding:03rem;

height:100%;

text-align:center;

}

.form-title{

font-weight:300;

margin:0;

margin-bottom:1.25rem;

}

.link{

color:#333;

font-size:0.9rem;

margin:1.5rem0;

text-decoration:none;

}

.input{

width:100%;

background-color:#fff;

padding:0.9rem0.9rem;

margin:0.5rem0;

border:none;

outline:none;

}

.btn{

background-color:#f25d8e;

box-shadow:04px4pxrgba(255,112,159,.3);

border-radius:5px;

color:#e7e7e7;

border:none;

cursor:pointer;

font-size:0.8rem;

font-weight:bold;

letter-spacing:0.1rem;

padding:0.9rem4rem;

text-transform:uppercase;

transition:transform80msease-in;

}

.form>.btn{

margin-top:1.5rem;

}

.btn:active{

transform:scale(0.95);

}

/*----------叠加部分样式-------------*/

.container-overlay{

height:100%;

left:50%;

overflow:hidden;

position:absolute;

top:0;

transition:transform0.6sease-in-out;

width:50%;

z-index:100;

}

.overlay{

width:200%;

height:100%;

position:relative;

left:-100%;

background:url("./img/background.jpg")no-repeatcenterfixed;

background-size:cover;

transition:transform0.6sease-in-out;

transform:translateX(0);

}

.overlay-panel{

height:100%;

width:50%;

position:absolute;

top:0;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

transform:translateX(0);

transition:transform0.6sease-in-out;

}

.overlay-left{

transform:translateX(-20%);

}

.overlay-right{

right:0;

transform:translateX(0);

}

/*设计激活时叠加层的位置*/

.panel-active.overlay-left{

transform:translateX(0);

}

.panel-active.container-overlay{

transform:translateX(-100%);

}

.panel-active.overlay{

transform:translateX(50%);

}

/*设置激活时,登录注册层的位置和透明度*/

.panel-active.container-signin{

transform:translateX(100%);

}

.panel-active.container-signup{

opacity:1;

z-index:5;

transform:translateX(100%);

}

实现思路拆分

body{

height:100vh;/*定义页面高度为视口高度*/

background:#e7e7e7url("./img/background.jpg")centerno-repeatfixed;/*定义页面背景为灰色,并添加背景图片*/

background-size:cover;/*定义背景图片大小为覆盖整个页面*/

backdrop-filter:blur(5px);/*定义背景模糊效果*/

display:flex;/*定义页面为弹性盒子*/

justify-content:center;/*定义主轴对齐方式为居中*/

align-items:center;/*定义交叉轴对齐方式为居中*/

}

这段代码定义了页面的整体样式,包括高度、背景、边框、阴影等。其中,height:100vh;表示页面高度为视口高度,background:#e7e7e7url("./img/background.jpg")centerno-repeatfixed;表示页面背景为灰色,并添加背景图片,background-size:cover;表示背景图片大小为覆盖整个页面,backdrop-filter:blur(5px);表示背景模糊效果。

.container-form{

height:100%;/*定义容器高度为100%*/

position:absolute;/*定义容器为绝对定位*/

top:0;/*定义容器距离顶部为0*/

transition:all0.6sease-in-out;/*定义过渡效果*/

}

.container-signin{

left:0;/*定义登录框距离左侧为0*/

width:50%;/*定义登录框宽度为50%*/

z-index:2;/*定义登录框层级为2*/

}

.container-signup{

left:0;/*定义注册框距离左侧为0*/

opacity:0;/*定义注册框透明度为0*/

width:50%;/*定义注册框宽度为50%*/

z-index:1;/*定义注册框层级为1*/

}

这段代码定义了登录、注册框的样式,包括位置、透明度、层级等。其中,height:100%;表示容器高度为100%,position:absolute;表示容器为绝对定位,top:0;表示容器距离顶部为0,transition:all0.6sease-in-out;表示过渡效果。

.form{

background-color:#e7e7e7;/*定义表单背景为灰色*/

display:flex;/*定义表单为弹性盒子*/

align-items:center;/*定义交叉轴对齐方式为居中*/

justify-content:center;/*定义主轴对齐方式为居中*/

flex-direction:column;/*定义主轴方向为垂直方向*/

padding:03rem;/*定义表单内边距为左右各3rem*/

height:100%;/*定义表单高度为100%*/

text-align:center;/*定义表单文本对齐方式为居中*/

}

.form-title{

font-weight:300;/*定义标题字体粗细为300*/

margin:0;/*定义标题外边距为0*/

margin-bottom:1.25rem;/*定义标题下边距为1.25rem*/}

.link{color:#333;/*定义链接颜色为黑色/font-size:0.9rem;/定义链接字体大小为0.9rem/margin:1.5rem0;/定义链接外边距为上下各1.5rem,左右各0/text-decoration:none;/定义链接去除下划线*/}

.input{width:100%;/*定义输入框宽度为100%/background-color:#fff;/定义输入框背景为白色/padding:0.9rem0.9rem;/定义输入框内边距为上下各0.9rem,左右各0.9rem/margin:0.5rem0;/定义输入框外边距为上下各0.5rem,左右各0/border:none;/定义输入框无边框/outline:none;/定义输入框无轮廓线*/}

.btn{background-color:#f25d8e;/*定义按钮背景为粉红色/box-shadow:04px4pxrgba(255,112,159,.3);/定义按钮阴影效果/border-radius:5px;/定义按钮圆角半径为5px/color:#e7e7e7;/定义按钮文本颜色为白色/border:none;/定义按钮无边框/cursor:pointer;/定义按钮为指针类型/font-size:0.8rem;/定义按钮字体大小为0.8rem/font-weight:bold;/定义按钮字体粗细为bold/letter-spacing:0.1rem;/定义按钮字母间距为0.1rem/padding:0.9rem4rem;/定义按钮内边距为上下各0.9rem,左右各4rem/text-transform:uppercase;/定义按钮文本为大写字母/transition:transform80msease-in;/定义按钮过渡效果*/}

.form>.btn{margin-top:1.5rem;/*定义按钮上边距为1.5rem*/}

.btn:active{transform:scale(0.95);/*定义按钮激活时缩放效果*/}

这段代码定义了登录和注册表单的样式,包括背景、字体、输入框、按钮等。其中,background-color:#e7e7e7;表示表单背景为灰色,display:flex;表示表单为弹性盒子,align-items:center;表示交叉轴对齐方式为居中,justify-content:center;表示主轴对齐方式为居中,flex-direction:column;表示主轴方向为垂直方向,padding:03rem;表示表单内边距为左右各3rem,height:100%;表示表单高度为100%,text-align:center;表示表单文本对齐方式为居中。

.container-overlay{

height:100%;

/*定义容器高度为100%/left:50%;/定义容器距离左侧为50%/overflow:hidden;/定义容器溢出部分隐藏/position:absolute;/定义容器为绝对定位/top:0;/定义容器距离顶部为0/transition:transform0.6sease-in-out;/定义过渡效果/width:50%;/定义容器宽度为50%/z-index:100;/定义容器层级为100*/

}

.overlay{

width:200%;

/*定义叠加层宽度为200%/height:100%;/定义叠加层高度为100%/position:relative;/定义叠加层为相对定位/left:-100%;/定义叠加层距离左侧为-100%/background:url("./img/background.jpg")no-repeatcenterfixed;/定义叠加层背景为背景图片,并居中对齐/background-size:cover;/定义叠加层背景大小为覆盖整个页面/transition:transform0.6sease-in-out;/定义过渡效果/transform:translateX(0);/定义叠加层初始位置为0*/

}

.overlay-panel{

height:100%;

/*定义叠加层面板高度为100%/width:50%;/定义叠加层面板宽度为50%/position:absolute;/定义叠加层面板为绝对定位/top:0;/定义叠加层面板距离顶部为0/display:flex;/定义叠加层面板为弹性盒子/justify-content:center;/定义主轴对齐方式为居中/align-items:center;/定义交叉轴对齐方式为居中/flex-direction:column;/定义主轴方向为垂直方向/transform:translateX(0);/定义叠加层面板初始位置为0/transition:transform0.6sease-in-out;/定义过渡效果*/

}

.overlay-left{

transform:translateX(-20%);

/*定义左侧叠加层面板位置为向左移动20%*/

}

.overlay-right{

right:0;

/*定义右侧叠加层面板距离右侧为0/transform:translateX(0);/定义右侧叠加层面板位置为0*/

}

/*设计激活时叠加层的位置/.panel-active.overlay-left{transform:translateX(0);/定义左侧叠加层面板位置为0*/

}

.panel-active.container-overlay{

transform:translateX(-100%);

/*定义容器距离左侧为-100%*/

}

.panel-active.overlay{

transform:translateX(50%);

/*定义叠加层位置为向右移动50%*/

}

/*设置激活时,登录注册层的位置和透明度/.panel-active.container-signin{transform:translateX(100%);/定义登录层位置为向右移动100%*/

}

.panel-active.container-signup{

opacity:1;

/*定义注册层透明度为1/z-index:5;/定义注册层层级为5/transform:translateX(100%);/定义注册层位置为向右移动100%*/

}

这段代码定义了登录和注册页面的叠加层的样式,包括位置、大小、透明度、层级等。其中,height:100%;表示容器高度为100%,left:50%;表示容器距离左侧为50%,overflow:hidden;表示容器溢出部分隐藏,position:absolute;表示容器为绝对定位,top:0;表示容器距离顶部为0,transition:transform0.6sease-in-out;表示过渡效果,width:50%;表示容器宽度为50%,z-index:100;表示容器层级为100。

居中对齐,background-size:cover;表示叠加层背景大小为覆盖整个页面,transition:transform0.6sease-in-out;表示过渡效果,transform:translateX(0);表示叠加层初始位置为0。

叠加层面板的样式包括叠加层面板的高度、宽度、位置、显示方式、对齐方式、主轴方向、过渡效果、初始位置等。其中,height:100%;表示叠加层面板高度为100%,width:50%;表示叠加层面板宽度为50%,position:absolute;表示叠加层面板为绝对定位,top:0;表示叠加层面板距离顶部为0,display:flex;表示叠加层面板为弹性盒子,justify-content:center;表示主轴对齐方式为居中,align-items:center;表示交叉轴对齐方式为居中,flex-direction:column;表示主轴方向为垂直方向,transform:translateX(0);表示叠加层面板初始位置为0,transition:transform0.6sease-in-out;表示过渡效果。

叠加层面板的左侧和右侧样式分别定义为overlay-left和overlay-right,分别表示左侧和右侧叠加层面板的样式。其中,transform:translateX(-20%);表示左侧叠加层面板位置为向左移动20%,right:0;表示右侧叠加层面板距离右侧为0,transform:translateX(0);表示右侧叠加层面板位置为0。

当激活时,叠加层的位置和透明度会发生变化,包括左侧叠加层面板位置、容器距离左侧、叠加层位置、注册层透明度、注册层位置等。其中,.panel-active.overlay-left表示当激活时,左侧叠加层面板位置为0,.panel-active.container-overlay表示当激活时,容器距离左侧为-100%,.panel-active.overlay表示当激活时,叠加层位置为向右移动50%,.panel-active.container-signin表示当激活时,登录层位置为向右移动100%,.panel-active.container-signup表示当激活时,注册层透明度为1,注册层层级为5,注册层位置为向右移动100%。

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JavaScript判断窗口是否最小化的代码(跨浏览器)

 

下一篇:css实现边框流动的项目实践

发布日期:2024/2/4
手机扫二维码直达本页
发布时间:14:43:27
点  击:38
录  入:哲哲
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....