注册登录界面切换特效-html代码-BFW代码库

注册登录界面切换特效

代码语言：html

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册登录界面js特效炫酷切换代码</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            $(".input input").focus(function() {

                $(this).parent(".input").each(function() {
                    $("label", this).css({
                        "line-height": "18px",
                        "font-size": "18px",
                        "font-weight": "100",
                        "top": "0px"
                    })
                    $(".spin", this).css({
                        "width": "100%"
                    })
                });
            }).blur(function() {
                $(".spin").css({
                    "width": "0px"
                })
                if ($(this).val() == "") {
                    $(this).parent(".input").each(function() {
                        $("label", this).css({
                            "line-height": "60px",
                            "font-size": "24px",
                            "font-weight": "300",
                            "top": "10px"
                        })
                    });

                }
            });

            $(".button").click(function(e) {
                var pX = e.pageX,
                pY = e.pageY,
                oX = parseInt($(this).offset().left),
                oY = parseInt($(this).offset().top);

                $(this).append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>')
                $('.x-' + oX + '.y-' + oY + '').animate({
                    "width": "500px",
                    "height": "500px",
                    "top": "-250px",
                    "left": "-250px",

                }, 600);
                $("button", this).addClass('active');
            })

            $(".alt-2").click(function() {
                if (!$(this).hasClass('material-button')) {
                    $(".shape").css({
                        "width": "100%",
                        "height": "100%",
                        "transform": "rotate(0deg)"
                    })

                    setTimeout(function() {
                        $(".overbox").css({
                            "overflow": "initial"
                        })
                    }, 600)

                    $(this).animate({
                        "width": "100px",
                        "height": "100px"
                    }, 500, function() {
                        $(".box").removeClass("back");

                        $(this).removeClass('active')
                    });

                    $(".overbox .title").fadeOut(300);
                    $(".overbox .input").fadeOut(300);
                    $(".overbox .button").fadeOut(300);

                    $(".alt-2").addClass('material-buton');
                }

            })

            $(".material-button").click(function() {

                if ($(this).hasClass('material-button')) {
                    setTimeout(function() {
                        $(".overbox").css({
                            "overflow": "hidden"
                        })
                        $(".box").addClass("back");
                    }, 200)
                    $(this).addClass('active').animate({
                        "width": "700px",
                        "height": "700px"
                    });

                    setTimeout(function() {
                        $(".shape").css({
                            "width": "50%",
                            "height": "50%",
                            "transform": "rotate(45deg)"
                        })

                        $(".overbox .title").fadeIn(300);
                        $(".overbox .input").fadeIn(300);
                        $(".overbox .button").fadeIn(300);
                    }, 700)

                    $(this).removeClass('material-button');

                }

                if ($(".alt-2").hasClass('material-buton')) {
                    $(".alt-2").removeClass('material-buton');
                    $(".alt-2").addClass('material-button');
                }

            });
        });
    </script>
    <style>
        .box {
            position: relative;
            top: 0;
            opacity: 1;
            float: left;
            padding: 60px 50px 40px 50px;
            width: 100%;
            background: #fff;
            border-radius: 10px;
            transform: scale(1);
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            z-index: 5;
        }

        .box.back {
            transform: scale(.95);
            -webkit-transform: scale(.95);
            -ms-transform: scale(.95);
            top: -20px;
            opacity: .8;
            z-index:.........完整代码请登录后点击上方下载按钮下载查看