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

知识汲取者

已于 2022-09-03 17:52:58 修改

阅读量518

点赞数

分类专栏： # 前端_Demo 前端开发文章标签： jquery css css3

于 2022-09-03 17:52:42 首次发布

该文章版权属于知识汲取者，未经允许请勿转载

本文链接：https://blog.csdn.net/qq_66345100/article/details/126679001

版权

前端开发同时被 2 个专栏收录

16 篇文章 4 订阅

订阅专栏

前端_Demo

6 篇文章 1 订阅

订阅专栏

文章目录

- 不偷看密码的猫头鹰

不偷看密码的猫头鹰

效果演示：

在这里插入图片描述

实现思路：

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

代码实现：

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

代码：

<!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>