JQuery实现不偷看密码的猫头鹰

不偷看密码的猫头鹰

效果演示:

在这里插入图片描述

实现思路:

主要是给密码框绑定一个获取焦点和失去焦点的函数,这里我使用的JQuery,当然并不一定要使用JQuery,用原生的JS也是可以实现的,只是要写的代码要多一点而已。其次我们需要使用transitiontransform两个属性编写一个CSS渐变效果,我们需要使用addClassremoveClass两个方法动态添加和移除这些样式,当密码框获取焦点就添加样式,让猫头鹰遮住眼睛不偷看密码,当密码框失去焦点就移除样式,至此就实现了,废话不多说,上代码👇

代码实现:

目录结构
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>不偷看密码的超萌猫头鹰</title>
    <style>
        * {
            /* 初始化 */
            margin: 0;
            padding: 0;
        }
        
        body {
            /* 100%窗口高度 */
            height: 100vh;
            /* 弹性布局 居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 渐变背景 */
            background: linear-gradient(200deg, #72afd3, #96fbc4);
        }
        
        .login-box {
            /* 相对定位 */
            position: relative;
            width: 320px;
        }
        
        .input-box {
            /* 弹性布局 垂直排列 */
            display: flex;
            flex-direction: column;
        }
        
        .input-box input {
            height: 40px;
            border-radius: 3px;
            /* 缩进15像素 */
            text-indent: 15px;
            outline: none;
            border: none;
            margin-bottom: 15px;
        }
        
        .input-box input:focus {
            outline: 1px solid lightseagreen;
        }
        
        .input-box button {
            border: none;
            height: 45px;
            background-color: lightseagreen;
            color: #fff;
            border-radius: 3px;
            cursor: pointer;
        }
        /* 接下来是猫头鹰的样式 */
        
        .owl {
            width: 211px;
            height: 108px;
            /* 背景图片 */
            background: url("../images/login-owl-head.png") no-repeat;
            /* 绝对定位 */
            position: absolute;
            top: -100px;
            /* 水平居中 */
            left: 50%;
            transform: translateX(-50%);
        }
        
        .owl .hand {
            width: 34px;
            height: 34px;
            border-radius: 40px;
            background-color: #472d20;
            /* 绝对定位 */
            position: absolute;
            left: 12px;
            bottom: -8px;
            /* 沿Y轴缩放0.6倍(压扁) */
            transform: scaleY(0.6);
            /* 动画过渡 */
            transition: 0.3s ease-out;
        }
        
        .owl .hand.hand-r {
            left: 170px;
        }
        
        .owl.password .hand {
            transform: translateX(42px) translateY(-15px) scale(0.7);
        }
        
        .owl.password .hand.hand-r {
            transform: translateX(-42px) translateY(-15px) scale(0.7);
        }
        
        .owl .arms {
            position: absolute;
            top: 58px;
            width: 100%;
            height: 41px;
            overflow: hidden;
        }
        
        .owl .arms .arm {
            width: 40px;
            height: 65px;
            position: absolute;
            left: 20px;
            top: 40px;
            background: url("../images/login-owl-hand.png") no-repeat;
            transform: rotate(-20deg);
            transition: 0.3s ease-out;
        }
        
        .owl .arms .arm.arm-r {
            transform: rotate(20deg) scaleX(-1);
            left: 158px;
        }
        
        .owl.password .arms .arm {
            transform: translateY(-40px) translateX(40px);
        }
        
        .owl.password .arms .arm.arm-r {
            transform: translateY(-40px) translateX(-40px) scaleX(-1);
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#password').focus(function() {
                // 密码框获得焦点,追加样式.password
                $('#owl').addClass('password');
            }).blur(function() {
                // 密码框失去焦点,移除样式.password
                $('#owl').removeClass('password');
            })
        })
    </script>
</head>

<body>
    <div class="login-box">
        <div class="owl" id="owl">
            <div class="hand"></div>
            <div class="hand hand-r"></div>
            <div class="arms">
                <div class="arm"></div>
                <div class="arm arm-r"></div>
            </div>
        </div>
        <div class="input-box">
            <input type="text" placeholder="账号">
            <input type="password" placeholder="密码" id="password">
            <button>登录</button>
        </div>
    </div>
</body>

</html>
</body>

</html>

最后附上所需的图片
在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个使用jQuery实现重置密码的示例: HTML代码: ``` <form id="reset-password-form"> <div> <label for="current-password">当前密码:</label> <input type="password" id="current-password" name="current-password"> </div> <div> <label for="new-password">新密码:</label> <input type="password" id="new-password" name="new-password"> </div> <div> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password"> </div> <button type="submit">重置密码</button> </form> ``` jQuery代码: ``` $(document).ready(function() { // 监听表单提交事件 $('#reset-password-form').submit(function(event) { // 阻止表单的默认提交行为 event.preventDefault(); // 获取表单数据 var currentPassword = $('#current-password').val(); var newPassword = $('#new-password').val(); var confirmPassword = $('#confirm-password').val(); // 验证表单数据 if (newPassword !== confirmPassword) { alert('新密码和确认密码不一致!'); return; } // 发送重置密码请求 $.ajax({ url: '/reset-password', // 重置密码的API接口地址 method: 'POST', data: { current_password: currentPassword, new_password: newPassword }, success: function(response) { alert('密码重置成功!'); }, error: function(xhr, status, error) { alert('密码重置失败:' + error); } }); }); }); ``` 这段代码监听了表单的提交事件,获取表单中的数据并验证新密码和确认密码是否一致,然后使用jQuery的ajax方法发送重置密码的请求,并在成功或失败时显示相应的提示信息。你需要将代码中的URL和数据参数替换为你自己的API接口地址和数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知识汲取者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值