你输入的密码正确吗? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>peeky</title> <style type="text/css"> password { position: relative; display: block; width: 300px; height: 50px; } input { width: 100%; height: 100%; padding: 10px; font-size: 16px; outline: 0; } button { position: absolute; height: 100%; width: 50px; top: 0; right: 0; background: #424242; cursor: pointer; border: 0; padding: 0; margin: 0; outline: 0; } button::before, button::after { content:''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } /* Eye open */ input[type='password'] + button::before { width: 20px; height: 20px; background: #e0e0e0; border-radius: 15px 0 15px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: height .168s; transition: height .168s; } /* Pupil open */ input[type='password'] + button::after { width: 10px; height: 10px; border-radius: 50%; background: #424242; } /* Eye closed */ input[type='text'] + button::before { width: 15px; height: 15px; background: transparent; border: 3px solid #e0e0e0; border-radius: 15px 0 15px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Pupil closed */ input[type='text'] + button::after { width: 3px; height: 30px; border-radius: 0; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); background: #e0e0e0; -webkit-transition: height .132s; transition: height .132s; } /* Demo Styles */ * { box-sizing: border-box; } html, body { height: 100%; background: #212121; } body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } h1 { color: #fff; font-family: helvetica, sans-serif; font-size: 24px; font-weight: bold; margin-bottom: 36px; } </style> </head> <body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <h1>Peeky Password</h1> <password> <input type="password" placeholder="Password" value="Password123"> <button></button> </password> <script type="text/javascript"> $('button').on('click', function() { var $inp = $('input'); $inp.attr('type') === 'password' ? $inp.attr('type', 'text') : $inp.attr('type', 'password') }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » peeky 请让别人知道输入的密码是否正确 喜欢 (0)or分享 (0)
