注册登录界面切换特效-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: -1;
        }

        .box:before {
            content: "";
            width: 100%;
            height: 30px;
            border-radius: 10px;
            position: absolute;
            top: -10px;
            background: rgba(255, 255, 255, .6);
            left: 0;
            transform: scale(.95);
            -webkit-transform: scale(.95);
            -ms-transform: scale(.95);
            z-index: -1;
        }

        .overbox .title {
            color: #fff;
        }

        .overbox .title:before {
            background: #fff;
        }

        .title {
            width: 100%;
            float: left;
            line-height: 46px;
            font-size: 34px;
            font-weight: 700;
            letter-spacing: 2px;
            color: #ED2553;
            position: relative;
        }

        .title:before {
            content: "";
            width: 5px;
            height: 100%;
            position: absolute;
            top: 0;
            left: -50px;
            background: #ED2553;
        }

        .input,
        .input label,
        .input input,
        .input .spin,
        .button,
        .button button .button.login button i.fa,
        .material-button .shape:before,
        .material-button .shape:after,
        .button.login button {
            transition: 300ms cubic-bezier(.4, 0, .2, 1);
            -webkit-transition: 300ms cubic-bezier(.4, 0, .2, 1);
            -ms-transition: 300ms cubic-bezier(.4, 0, .2, 1);
        }

        .material-button,
        .alt-2,
        .material-button .shape,
        .alt-2 .shape,
        .box {
            transition: 400ms cubic-bezier(.4, 0, .2, 1);
            -webkit-transition: 400ms cubic-bezier(.4, 0, .2, 1);
            -ms-transition: 400ms cubic-bezier(.4, 0, .2, 1);
        }

        .input,
        .input label,
        .input input,
        .input .spin,
        .button,
        .button button {
            width: 100%;
            float: left;
        }

        .input,
        .button {
            margin-top: 30px;
            height: 70px;
        }

        .input,
        .input input,
        .button,
        .button button {
            position: relative;
        }

        .input input {
            height: 60px;
            top: 10px;
            border: none;
            background: transparent;
        }

        .input input,
        .input label,
        .button button {
            font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
            font-size: 24px;
            color: rgba(0, 0, 0, 0.8);
            font-weight: 300;
        }

        .input:before,
        .input .spin {
            width: 100%;
            height: 1px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .input:before {
            content: "";
            background: rgba(0, 0, 0, 0.1);
      .........完整代码请登录后点击上方下载按钮下载查看
注册登录界面切换特效

网友评论0

css+js实现可显示和隐藏密码输入框效果代码

css实现自适应简洁英文登录注册表单页面代码

vue-select实现vue3下拉选择框效果代码

jquery.dropdown实现下拉单选多选框效果代码

css实现range数字选择美化效果代码

layui-vue实现考试题目添加表单录入效果代码

svg+css实现简洁登录表单页面代码

vue实现多步骤进度条表单填写效果代码

js+css实现联系我们自适应表单反馈交互效果代码

js+svg实现高科技登录登录表单页面代码
