登录注册框切换
代码语言:html
所属分类:布局界面
代码描述:登录注册框切换
代码标签: 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body, html{
font-family: Ariel, sans-serif;
width:100%;
height:100%;
margin:0;
padding:0;
display:inline-block;
}
.page{
display:flex;
flex-flow:row;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
width:100%;
height:100%;
background-color: #65A192;
}
.panel{
display:inline-block;
position:relative;
}
.panel__visible{
position:relative;
overflow: hidden;
}
.panel__title{
margin-top: .5em;
margin-bottom: 1.2em;
}
.panel__content{
padding: 20px;
background-color: white;
z-index:10;
position:relative;
}
.panel__content--overlay{
position:absolute;
top:0;
left:100%;
height:100%;
}
.panel__content.animate{
animation: movePanel 2s forwards ;
}
@keyframes movePanel{
0%, 30%{
transform: translateX(0%);
}
35%, 100%{
transform: translateX(-100%);
}
}
.panel__content.animateOut{
animation: movePanelOut 2s forwards ;
}
@keyframes moveP.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0