CSS3实现3D旋转动态显示登录注册

2018-02-27 10:59:11来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

CSS3实现3D旋转动态显示登录注册

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta content="width=device-width, initial-scale=1">    <title></title>    <style>        * {            box-sizing: border-box;            -webkit-font-smoothing: antialiased        }        body,html {            width: 100%;            height: 100%        }        body {            position: relative;            background: radial-gradient(#666, #222);        }        .form-card-container {            margin: 0 auto;            height: 375px;            -webkit-perspective: 300px;            perspective: 300px        }        .form_swap-link {            position: absolute;            margin-top: -33px;            margin-left: 0;            width: 50px;            height: 30px;            border-top-right-radius: 4px;            border-bottom-right-radius: 4px;            background: #00a7fe;            box-shadow: 0 1px 3px rgba(0,0,0,.3);            color: #fff;            text-align: center;            text-decoration: none;            font: 15px Arial,"微软雅黑";            line-height: 30px        }        .form_swap-link:active {            animation: myfirst 1s        }        @keyframes myfirst {            0% {                font-size: 10px            }            50% {                font-size: 20px            }        }        .form-card {            position: absolute;            top: 50%;            left: 50%;            margin: 0 0 0 -150px;            width: 300px;            height: 250px;            -webkit-transition: -webkit-transform .8s;            transition: transform .8s;            -webkit-transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);            transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);            -webkit-transform-style: preserve-3d;            transform-style: preserve-3d        }        @keyframes user_animation {            0% {                margin-left: 30px            }        }        .form-card.form-card-flipped {            -webkit-transform: rotateX(-180deg);            transform: rotateX(-180deg)        }        .form-card_front:before {            content: "会员登录"        }        .form-card_back:before,.form-card_front:before {            display: block;            margin-top: 20px;            width: 300px;            color: #222;            text-align: center;            font: 21px Arial,"微软雅黑"        }        .form-card_back:before {            content: "快速注册"        }        .form-card_front input {            margin: 15px auto        }        .form-card_back input,.form-card_front input {            display: block;            width: 230px;            height: 30px;            outline: 0;            border: 1px solid #ddd;            border-radius: 4px;            text-indent: 5px;            font-size: 15px;            transition: all 1s ease        }        .form-card_back input {            margin: 10px auto        }        .form-card_back input:focus,.form-card_front input:focus {            border: 1px solid #229ffd        }        .form-card_back,.form-card_front {            position: absolute;            display: block;            width: 100%;            height: 100%;            border-radius: 4px;            background: #f5f5f5;            box-shadow: 0 1px 3px rgba(0,0,0,.3);            -webkit-backface-visibility: hidden;            backface-visibility: hidden        }        .form-card_back {            -webkit-transform: rotateX(180deg);            transform: rotateX(180deg)        }        #inuptUser:focus+label[for*=inuptUser]:before {            margin-top: -40px;            margin-left: 220px;            height: 20px;            color: #ddd;            content: '用户名'        }        #inuptPwd:focus+label[for*=inuptPwd]:before,#inuptUser:focus+label[for*=inuptUser]:before {            position: absolute;            display: block;            width: 150px;            font: 13px Arial,"微软雅黑";            transition: all .3s ease;            animation: user_animation 1s        }        #inuptPwd:focus+label[for*=inuptPwd]:before {            margin-top: -40px;            margin-left: 230px;            height: 26px;            color: #ccc;            content: '密码'        }        #regUser:focus+label[for*=regUser]:before {            position: absolute;            display: block;            margin-top: -35px;            margin-left: 220px;            width: 150px;            height: 20px;            color: #ddd;            content: '用户名';            font: 13px Arial,"微软雅黑";            transition: all .3s ease;            animation: user_animation 1s        }        #regPwd:focus+label[for*=regPwd]:before {            margin-left: 230px;            content: '密码'        }        #confirmPwd:focus+label[for*=confirmPwd]:before,#regPwd:focus+label[for*=regPwd]:before {            position: absolute;            display: block;            margin-top: -35px;            width: 150px;            height: 26px;            color: #ddd;            font: 13px Arial,"微软雅黑";            transition: all .3s ease;            animation: user_animation 1s        }        #confirmPwd:focus+label[for*=confirmPwd]:before {            margin-left: 205px;            content: '确认密码'        }        input[type="submit"] {            color:#555;            margin:10px auto;            display: block;            cursor: pointer;            width:230px;            height:30px;            color:#fff;            border-radius:4px;            border:1px solid #0d7bc4;            background: -webkit-linear-gradient( top,#229ffd,#1f86d4);            -webkit-box-sizing: border-box;            -moz-box-sizing: border-box;            box-sizing: border-box;            -webkit-transition-property: all;            transition-property: all;            -webkit-transition-duration: 0.05s;            transition-duration: 0.05s;        }        input[type="submit"]:active {            appearance: none;            text-decoration: none;            -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.1) inset;        }    </style></head><body><div >    <div >        <div >            <a href="#" >注册</a>            <form action="post">                <input value=""   maxlength="20" />                <label for="inuptUser" ></label>                <input value="" type="password"  type="password"  maxlength="20" />                <label for="inuptPwd" ></label>                <input type="submit" value="登录"  />            </form>        </div>        <div >            <a href="#"  >登录</a>            <form action="post">                <input value=""   maxlength="20" />                <label for="regUser" ></label>                <input value=""  type="password" maxlength="20" />                <label for="regPwd" ></label>                <input value=""   type="password"  maxlength="20" />                <label for="confirmPwd" ></label>                <input type="submit" value="注册" />            </form>        </div>    </div></div><!-- 推荐开源CDN来选取需引用的外部JS //--><script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script><script>/*Javascript代码片段*/$('.form_swap-link').click(function() {    $('.form-card').toggleClass('form-card-flipped');});</script></body></html>

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台