登录注册框切换
代码语言: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