动态html登录界面

已于 2023-06-29 10:00:01 修改
阅读量1.3k 收藏 29
点赞数 3
文章标签： html css css3
于 2022-12-12 15:35:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45179408/article/details/128287978
版权

网上百度到的有趣一点的动态登录界面收藏下

一.猫头鹰遮眼睛

在这里插入图片描述
在这里插入图片描述
css:

* {
    /* 初始化 */
    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/owl-login..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/owl-login-arm.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);
        }

html

@{
    Layout = null;
}

<!DOCTYPE html>
<html>

<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>
    <link href="~/yui/50.css" rel="stylesheet" />
    <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>

改一下html的样式引用路径，再改一下css中图片路径就好了
在这里插入图片描述
在这里插入图片描述

二.熊猫眼睛动并且输入密码举牌子

在这里插入图片描述
在这里插入图片描述

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<style type="text/css">
    * {
        /* 初始化 */
        margin: 0;
        padding: 0;
    }

    body {
        /* 100%窗口高度 */
        height: 100vh;
        /* 弹性布局 水平+垂直居中 */
        display: flex;
        justify-content: center;
        align-items: center;
        /* 渐变背景 */
        background: linear-gradient(200deg, #37e2b2, #2fa080);
    }

    /* 开始画熊猫 */
    .panda {
        /* 相对定位 */
        position: relative;
        width: 200px;
    }

    /* 脸部 */
    .face {
        width: 200px;
        height: 200px;
        background-color: #fff;
        border-radius: 100%;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
        position: relative;
        z-index: 1;
    }

    /* 耳朵 */
    .ear {
        width: 70px;
        height: 70px;
        background-color: #000;
        border-radius: 100%;
        position: absolute;
        top: -10px;
    }

        .ear.right {
            right: 0;
        }

    /* 黑眼圈 */
    .eye-shadow {
        width: 50px;
        height: 80px;
        background-color: #000;
        border-radius: 50%;
        /* 绝对定位 */
        position: absolute;
        top: 40px;
    }

        .eye-shadow.left {
            transform: rotate(45deg);
            left: 30px;
        }

        .eye-shadow.right {
            transform: rotate(-45deg);
            right: 30px;
        }

    /* 眼白 */
    .eye-white {
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 100%;
        position: absolute;
        top: 68px;
    }

        .eye-white.left {
            left: 38px;
        }

        .eye-white.right {
            right: 38px;
        }

    /* 眼球 */
    .eye-ball {
        width: 20px;
        height: 20px;
        background-color: #000;
        border-radius: 100%;
        position: absolute;
        left: 5px;
        top: 5px;
    }

    /* 鼻子 */
    .nose {
        width: 35px;
        height: 20px;
        background-color: #000;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 65px;
        border-radius: 42px 42px 60px 60px / 30px 30px 60px 60px;
    }

    /* 嘴巴 */
    .mouth {
        width: 68px;
        height: 25px;
        border-bottom: 7px solid #000;
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 35px;
    }

    /* 身体 */
    .body {
        width: 250px;
        height: 280px;
        background-color: #fff;
        position: relative;
        left: -25px;
        top: -10px;
        border-radius: 100px 100px 100px 100px / 126px 126px 96px 96px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }

    /* 脚 */
    .foot {
        width: 82px;
        height: 120px;
        background-color: #000;
        position: absolute;
        bottom: 8px;
        z-index: 3;
        border-radius: 40px 40px 35px 40px / 26px 26px 63px 63px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    }

        .foot.left {
            left: -80px;
        }

        .foot.right {
            right: -80px;
            transform: rotateY(180deg);
        }

        /* 脚掌-大椭圆 */
        .foot::after {
            content: "";
            width: 55px;
            height: 65px;
            background-color: #222;
            position: absolute;
            border-radius: 50%;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 10px;
        }

        /* 脚掌-三个小椭圆 */
        .foot .sole,
        .foot .sole::before,
        .foot .sole::after {
            width: 20px;
            height: 30px;
            background-color: #222;
            position: absolute;
            border-radius: 50%;
            left: 0;
            right: 0;
            margin: auto;
            top: 8px;
        }

            .foot .sole::before {
                content: "";
                left: -50px;
            }

            .foot .sole::after {
                content: "";
                left: 25px;
            }

    /* 手 */
    .hand,
    .hand::before,
    .hand::after {
        width: 40px;
        height: 30px;
        background-color: #000;
        border-radius: 50px;
        position: absolute;
        top: 70px;
        left: -20px;
    }

        .hand::before {
            content: "";
            top: 16px;
            left: 0;
        }

        .hand::after {
            content: "";
            top: 32px;
            left: 0;
        }

        .hand.right {
            right: -20px;
            left: auto;
        }

    /* 登录框 */
    .login-box {
        width: 400px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -110px);
        z-index: 2;
        /* 弹性布局 居中 垂直排列 */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 设置过渡 */
        transition: 0.3s;
    }

    h1 {
        color: #1dc797;
        font-weight: normal;
        margin-bottom: 5px;
    }

    .ipt-box {
        width: 80%;
        margin-top: 25px;
        position: relative;
    }

        .ipt-box input {
            width: 100%;
            height: 35px;
            border: none;
            border-bottom: 1px solid #bbb;
            text-indent: 5px;
            outline: none;
            transition: 0.3s;
        }

        .ipt-box label {
            position: absolute;
            left: 5px;
            top: 5px;
            font-size: 14px;
            color: #888;
            transition: 0.3s;
            pointer-events: none;
        }

        /* 输入框选中或有值时输入框的样式 */
        .ipt-box input:focus,
        .ipt-box input:valid {
            border-color: #1dc797;
            box-shadow: 0 1px #1dc797;
        }

            /* 输入框选中或有值时label的样式 */
            .ipt-box input:focus ~ label,
            .ipt-box input:valid ~ label {
                color: #1dc797;
                font-size: 12px;
                transform: translateY(-15px);
            }

    button {
        width: 150px;
        height: 40px;
        background-color: #1dc797;
        border: none;
        border-radius: 3px;
        margin-top: 30px;
        color: #fff;
        letter-spacing: 10px;
        text-indent: 10px;
        cursor: pointer;
        transition: 0.3s;
    }

        button:hover {
            letter-spacing: 25px;
            text-indent: 25px;
            background-color: #2fa080;
        }

    /* 登录框向上举 */
    .up {
        transform: translate(-50%, -180px);
    }
</style>
<body>
    <div class="container">
        <div class="panda">
            <div class="ear left"></div>
            <div class="ear right"></div>
            <div class="face">
                <div class="eye-shadow left"></div>
                <div class="eye-white left">
                    <div class="eye-ball"></div>
                </div>
                <div class="eye-shadow right"></div>
                <div class="eye-white right">
                    <div class="eye-ball"></div>
                </div>
                <div class="nose"></div>
                <div class="mouth"></div>
            </div>
            <div class="body"></div>
            <div class="foot left">
                <div class="sole"></div>
            </div>
            <div class="foot right">
                <div class="sole"></div>
            </div>
        </div>
        <div class="login-box">
            <div class="hand left"></div>
            <div class="hand right"></div>
            <h1>用户登录</h1>
            <div class="ipt-box">
                <input type="text" required>
                <label>用户名</label>
            </div>
            <div class="ipt-box">
                <input type="password" id="password" required>
                <label>密码</label>
            </div>
            <button>登录</button>
        </div>
    </div>
    <script src="~/lib/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $('#password').focusin(function () {
            // 密码框选中
            $('.login-box').addClass('up');
        }).focusout(function () {
            // 密码框非选中
            $('.login-box').removeClass('up');
        })
        // 眼球移动
        $(document).on('mousemove', function (e) {
            let dw = $(document).width() / 10;
            let dh = $(document).height() / 18;
            let x = e.pageX / dw;
            let y = e.pageY / dh;
            $('.eye-ball').css({
                left: x,
                top: y
            })
        })
    </script>
</body>
</html>
qq_1749346024
关注
  • 3
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js超萌的猫头鹰登录界面，当输入密码的时候，猫头鹰会用翅膀遮住双眼，兼容主流浏览器
05-24
js超萌的猫头鹰登录界面，当输入密码的时候，猫头鹰会用翅膀遮住双眼，兼容主流浏览器
动态Jquery登录界面源码
11-10
动态Jquery登录界面源码，移动鼠标背景中的动态效果会随之发生变化，很不错的资源，很适合用于项目开发
前端H5动态背景登录页面（上）
qq_43826289的博客
03-05 1980
动态背景登录页面
jQuery HTML5蓝天白云动态云登陆界面.rar
07-10
jQuery HTML5蓝天白云动态云登陆界面，看到了逼真的白云效果了吗？基于CSS3实现的，HTML5运行环境，jquery的引入也是很重要的。这个带动画的云登录风格可广泛应用于网站后台用户登录、管理员登录等地方，设计的真是太棒了，很漂亮哦。
小熊动态动漫登陆界面
08-18
是一个完整的登录界面，可以作为个人网站的登录，动态的卡通小熊登录界面，可以集成到自己的系统中，可以用于课设，毕设的web应用
Android超级好看的动态登陆界面（附有详细代码）
m0_58941767的博客
08-19 6136
QQ视频20220819164103从视频效果中，看到这个动态的登陆界面还是比较好看的，下面开始介绍如何制作这个动态的登陆界面。这里有一点值得说一下，我们使用MotionLayout这个布局来实现动画效果，这个布局平时不太常见，它其实是属于ConstraintLayout的子类，所以它是一种布局类型，但是它能够为布局属性添加动画效果，是开发者实现动画效果的另一个新的选择。目前所实现的静态效果如下：接下来会通过资源文件来实现动态效果。...
樱花飞舞
diejian7742的博客
02-28 7361
<!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花漫天飞舞</title> </head> <style> body { padding:0; margin:0; overflow:hidden; ...
用html，css实现动态登录页面
s_ai_yan的博客
04-09 5071
大家可以先看一下效果 点击密码猫头鹰会自动遮住眼睛 同时附上图片 以下是html和css： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-sca...
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
叶绿体不忘呼吸
12-30 5838
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码，拿来即可用。
登录界面实现动态背景
oldolder的博客
03-20 1326
实现动态背景
登录页面(动态背景)
jakelihua
10-31 3096
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
HTML5动态后台登陆界面
07-07
HTML5动态后台登陆界面 整合进去了一些，提供给做网站做后台登陆使用
动态飘雪花html的登录界面
11-13
动态飘雪花html的登录界面,点击有猫头鹰遮眼睛，精美，适合学习，拿来即用，背景是晚上，暗系风格。
html+css+js款动态背景的登陆界面模板
最新发布
04-10
html+css+js款动态背景的登陆界面模板,适用于网页设计的个性化登录页面制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注...
vue实现用户动态权限登录
han_xiao_xiao的博客
05-22 2745
一、使用vue+elementUI搭登录框架，主要就是1、2、3、4。
任务卡_06-JavaWEB_Servlet【简单美观的动态登录页面功能设计，包含数据库连接，登录逻辑】
&再见萤火虫&的博客
04-14 2435
一，动态登录功能 1，任务概述 任意一个项目或 APP，必不可少的就是登录模块，用户登录成功或失败， 跳转到不同结果页面，现在刘磊接到组长分配的任务，需要给项目添加一个登 录模块，要求贴切真实网站需求，页面有表单验证，后台连接数据库真实判断， 跳转到不同页面给用户提示 2，任务过程 Servlet 创建 Servlet 的配置 Servlet 的访问 Servlet 中添加业务逻辑代码(连接数据库) 3，参考过程 3.1 配置说明 在我的IDE中，创建好web项目后，进入edi...
用php做动态登陆界面,实例详解HTML、CSS动态背景登录页面的实现
weixin_42391485的博客
03-10 1537
登录页面有一个背景，会大大增加人们的视觉享受，但是登录页面除了静态页面还有动态页面登录，本文主要介绍了HTML+CSS实现动态背景登录页面的相关资料,需要的朋友可以参考下，希望能帮助到大家。1. 实现背景图片的动态变换首先在HTML页面body板块中，添加图片p，代码如下：再对图片进行css设计。你要对图片进行大小定位，那么以下代码肯定要首先编写：`.bgk {margin: auto;posit...
HTML5+CSS3+JS制作动态背景登录界面
m0_71749982的博客
07-22 6052
如何制作出动态背景登录效果
分享一个会遮掩的吊炸天登录页面
热门推荐
java小白翻身
03-18 1万+
今天逛gitee，发现了一个有趣的页面，于是来分享一下。 先看效果： 熊猫是css画的，眼睛会跟着鼠标转动，当填写密码的时候，熊猫会把登录框举起来，遮住眼睛。 熊猫是css画的，每一个部分都是，真的是直呼666 /* 开始画熊猫 */ .panda{ /* 相对定位 */ position: relative; width: 200px; } /* 脸部 */ .face{ width: 200px; height: 200px; backgro
html网页制作动态登陆界面
06-08
要制作一个动态登陆界面，你需要掌握 HTML、CSS、JavaScript 和后端编程知识。 首先，你需要设计一个登陆表单，包括用户名和密码输入框、记住密码复选框、登陆按钮等元素。然后使用 CSS 美化登陆表单的样式，使其看起来更加美观。 接下来，你需要使用 JavaScript 编写登陆表单的验证和提交功能。当用户点击登陆按钮时，JavaScript 会验证用户输入的用户名和密码是否符合要求，如果不符合要求则提示用户重新输入，如果符合要求则将用户名和密码发送到后端进行验证。 最后，你需要使用后端编程语言（比如 PHP、Java、Python 等）编写一个处理登陆请求的接口。当接口接收到用户发送的用户名和密码时，会进行验证，如果验证通过则返回一个登陆成功的响应，否则返回一个登陆失败的响应。 在网页中引入这些组件，就可以实现一个动态登陆界面了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值