注册登录界面切换特效
代码语言: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