注册登录界面切换特效
代码语言: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:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0