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

青春..荒唐

浏览: 962327 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS
常见特效

CSS 常见特效

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 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 class="form-card-container">
    <div class="form-card">
        <div class="form-card_front">
            <a href="#" class="form_swap-link loginBtn">注册</a>
            <form class='form' action="post">
                <input value=""  id="inuptUser" maxlength="20" />
                <label for="inuptUser" ></label>
                <input value="" type="password" id="inuptPwd" type="password"  maxlength="20" />
                <label for="inuptPwd" ></label>
                <input type="submit" value="登录"  />
            </form>
        </div>
        <div class="form-card_back">
            <a href="#" class="form_swap-link regBtn" >登录</a>
            <form class='form' action="post">
                <input value=""  id="regUser" maxlength="20" />
                <label for="regUser" ></label>
                <input value="" id="regPwd" type="password" maxlength="20" />
                <label for="regPwd" ></label>

                <input value=""  id="confirmPwd" 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>

分享到：

jqery实现返回顶部效果 | JavaScript中NAN详解

2018-02-23 21:58
浏览 498
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

link和@import的区别

原生JS无缝轮播

浅谈锚点跳转优先级

返回顶部的几种方案

弹性盒模型（2）------Flex容器元素

弹性盒模型（1）------Flex布局对子元素影响

纯JS实现点击区域外隐藏元素

CSS优化单选多选按钮样式（2）

浅谈获取html元素宽高的两种方式-offsetWidth和width的区别

浅谈原生JS实现二级导航（优缺点与局限性）

浅谈jQuery实现二级导航（优缺点与局限性）

浅谈纯CSS实现二级导航（优缺点与局限性）

纯CSS实现半圆、1/4圆

CSS优化单选多选按钮样式（1）

原生JS实现瀑布流效果

jquery插件——仿新浪微博限制输入字数的textarea

浅谈css3长度单位rem，以及移动端布局技巧

CSS实现文字竖向排版

为什么绝对定位（absolute）的父级元素必须是相对定位

伪类和伪元素的区别

最近访客更多访客>>