jquery实现4位数密码框输入显示隐藏效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery实现4位数密码框输入显示隐藏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/solid.5.3.1.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fontawesome.5.3.1.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Nunito:900'> <style> * { outline:none; } html,body { height:100%; min-height:100%; } #app-cover { position:absolute; top:50%; left:0; right:0; width:350px; margin:0 auto; margin-top:-40px; } #cover { position:relative; height:80px; background-color:#25bf2b; border-radius:120px; box-shadow:0 10px 40px #208a23; overflow:hidden; } #key-icon,#key-cover,#key-dots,#show-key { position:absolute; top:0; bottom:0; } #key-icon { display:block; left:0; width:23px; height:26px; color:#fff; font-size:26px; text-align:center; line-height:1; padding:27px 28.63px; } #key-cover,#key-dots { left:80px; right:80px; } #key-cover { z-index:2; } #key { position:relative; display:block; left:6px; top:1px; height:80px; font-size:80px; color:#fff; padding:0; border:0; line-height:1; letter-spacing:12px; background-color:transparent; } #key-dots { overflow:hidden; z-index:1; } #dots { position:absolute; top:0; right:0; bottom:0; left:20px; height:80px; } #key,#dots { width:160px; margin:0 auto; } .dot { position:relative; top:50%; width:20px; height:20px; float:left; font-family:Arial,Helvetica,sans-serif; text-align:center; line-height:1.7; margin-right:20px; margin-top:-10px; background-color:#1b841f; border-radius:50%; -webkit-transform:scale(1); transform:scale(1); transition:0.2s ease transform; overflow:hidden; } .dot:last-child { margin-right:0; } .dot span { display:block; opacity:0; transition:0.4s ease opacity; } #key-dots.active { z-index:3; } #key-dots.active .dot { color:#fff; font-size:12px; font-weight:bold; font-family:Nunito,Arial,Helvetica,sans-serif; text-align:center; background-color:#1b841f; -webkit-transform:scale(1.7); transform:scale(1.7); } #key-dots .dot.white { color:#1b841f; background-color:#fff; } #key-dots .dot.white span.show { opacity:1; } #show-key { right:0; } #show-key i.fas { display:block; width:26px; height:27px; color:#fff; font-size:23px; padding:28.5px 27.07px; } </style> </head> <body> <div id="app-cover"> <div id=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0