jquery+css实现卡片式旋转切换登录注册表单页面代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css实现卡片式旋转切换登录注册表单页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html{margin:0;height:100%}body{margin:0;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#2196F3}.form-collection{width:350px;height:350px}.limit-width{width:300px}.absolute-footer{bottom:0;left:0;position:absolute;z-index:1;text-align:center;font-family:"Roboto",sans-serif;font-size:27.2px;font-size:1.7rem;font-weight:300;padding:15px;background:rgba(0,0,0,0.4);color:#fff}.form-collection{z-index:2}.card{font-family:"Open Sans",sans-serif;background:#fff;position:absolute;-webkit-transition:.3s ease all;transition:.3s ease all}.card-body{padding:20px}.box-btn{text-decoration:none;text-align:center;text-transform:uppercase;display:block;padding:15px;font-size:16px;font-weight:500;color:#444;background:rgba(0,0,0,0);-webkit-transition:.2s ease all;transition:.2s ease all;border-radius:3px}.box-btn:hover{background:rgba(0,0,0,0.06)}.box-btn:active{background:rgba(0,0,0,0.1)}.input-group{border:2px solid #eee;position:relative;background:#eee;margin:25px 0;border-radius:2px;overflow:hidden;padding:10px}.input-group input{border:0;background:transparent;width:100%;outline:0;font-weight:500;font-family:"Open Sans",sans-serif;font-size:16px}.input-group label{position:absolute;top:10px;left:0;padding-left:10px;font-weight:500;color:#aaa}.card-footer button{width:100%;padding:25px;font-size:24px;font-size:1.5rem;text-transform:uppercase;font-weight:600;background:#4CAF50;border:0;color:#fff;box-shadow:none;outline:0;cursor:pointer}.above{z-index:1}.below{z-index:0}.turned{opacity:.8;-ms-filter:"alpha(opacity=80)"}.sign-up-card,.log-in-card{box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)}.sign-up-card.turned{filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.8" /></filter></svg>#filter');-webkit-filter:blur(0.8px);filter:blur(0.8px);webkit-filter:blur(0.8px);-webkit-transform:rotateZ(-90deg) translate3d(0,100px,0) scale(0.7);transform:rotateZ(-90deg) translate3d(0,100px,0) scale(0.7);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.log-in-card.turned{filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="1" /></filter></svg>#filter');-webkit-filter:blur(1px);filter:blur(1px);webkit-filter:blur(1px);-webkit-transform:rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7);transform:rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7);box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}.animation-state-1 .sign-up-card.below{-webkit-transform:rotateZ(-7deg) translateY(150px) scale(0.78);transform:rotateZ(-7deg) translateY(150px) scale(0.78);opacity:1;-ms-filter:"alpha(opacity=100)";box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.4" /></filter></svg>#filter');-webkit-filter:blur(0.4px);filter:blur(0.4px);webkit-filter:blur(0.4px)}.animation-state-1 .log-in-card.above{-webkit-transform:rotateZ(-83deg) translateY(-180px) translateX(100px) scale(0.78);transform:rotateZ(-83deg) translateY(-180px) translateX(100px) scale(0.78);opacity:1;-ms-filter:"alpha(opacity=100)";box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.5" /></filter></svg>#filter');-webkit-filter:blur(0.5px);filter:blur(0.5px);webkit-filter:blur(0.5px)}.animation-state-finish .sign-up-card.above{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotateZ(5deg) translateY(0px) scale(1);transform:rotateZ(5deg) translateY(0px) scale(1);opacity:1;-ms-filter:"alpha(opacity=100)";box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');-webkit-filter:blur(0);filter:blur(0);webkit-filter:blur(0)}.animation-state-finish .log-in-card.below{-webkit-transform:rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7);transform:rotateZ(-90deg) translateX(0px) translateY(100px) scale(0.7);opacity:.8;-ms-filter:"alpha(opacity=80)";filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviati.........完整代码请登录后点击上方下载按钮下载查看