登录注册框切换

代码语言: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