漂亮的html登录页面

我就是我 2023-09-26 19:45 76阅读 0赞

#### 找到两个非常漂亮的html登录页面 ####

1,效果图片：  
![在这里插入图片描述][eefd05cc472b4f39b3cc89b40bb97ead.png_pic_center]

代码 `代码片`.

<!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>
    </head>
    
    <body>
        <div class="container">
            <div class="tit">登录</div>
            <input type="text" placeholder="账号">
            <input type="password" placeholder="密码">
            <button>登录</button>
            <span>没有账号？<a href="#">去注册</a></span>
        </div>
        <div class="square">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="circle">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    <style>
    *{
        
        /* 初始化 */
        margin: 0;
        padding: 0;
    }
    body{
        
        /* 100%窗口高度 */
        height: 100vh;
        /* 弹性布局 居中 */
        display: flex;
        justify-content: center;
        align-items: center;
        /* 渐变背景 */
        background: linear-gradient(200deg,#e3c5eb,#a9c1ed);
        /* 溢出隐藏 */
        overflow: hidden;
    }
    .container{
        
        /* 相对定位 */
        position: relative;
        z-index: 1;
        background-color: #fff;
        border-radius: 15px;
        /* 弹性布局 垂直排列 */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 350px;
        height: 500px;
        /* 阴影 */
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    .container .tit{
        
        font-size: 26px;
        margin: 65px auto 70px auto;
    }
    .container input{
        
        width: 280px;
        height: 30px;
        text-indent: 8px;
        border: none;
        border-bottom: 1px solid #ddd;
        outline: none;
        margin: 12px auto;
    }
    .container button{
        
        width: 280px;
        height: 40px;
        margin: 35px auto 40px auto;
        border: none;
        background: linear-gradient(-200deg,#fac0e7,#aac2ee);
        color: #fff;
        font-weight: bold;
        letter-spacing: 8px;
        border-radius: 10px;
        cursor: pointer;
        /* 动画过渡 */
        transition: 0.5s;
    }
    .container button:hover{
        
        background: linear-gradient(-200deg,#aac2ee,#fac0e7);
        background-position-x: -280px;
    }
    .container span{
        
        font-size: 14px;
    }
    .container a{
        
        color: plum;
        text-decoration: none;
    }
    ul li{
        
        position: absolute;
        border: 1px solid #fff;
        background-color: #fff;
        width: 30px;
        height: 30px;
        list-style: none;
        opacity: 0;
    }
    .square li{
        
        top: 40vh;
        left: 60vw;
        /* 执行动画：动画名 时长 线性的 无限次播放 */
        animation: square 10s linear infinite;
    }
    .square li:nth-child(2){
        
        top: 80vh;
        left: 10vw;
        /* 设置动画延迟时间 */
        animation-delay: 2s;
    }
    .square li:nth-child(3){
        
        top: 80vh;
        left: 85vw;
        /* 设置动画延迟时间 */
        animation-delay: 4s;
    }
    .square li:nth-child(4){
        
        top: 10vh;
        left: 70vw;
        /* 设置动画延迟时间 */
        animation-delay: 6s;
    }
    .square li:nth-child(5){
        
        top: 10vh;
        left: 10vw;
        /* 设置动画延迟时间 */
        animation-delay: 8s;
    }
    .circle li{
        
        bottom: 0;
        left: 15vw;
        /* 执行动画 */
        animation: circle 10s linear infinite;
    }
    .circle li:nth-child(2){
        
        left: 35vw;
        /* 设置动画延迟时间 */
        animation-delay: 2s;
    }
    .circle li:nth-child(3){
        
        left: 55vw;
        /* 设置动画延迟时间 */
        animation-delay: 6s;
    }
    .circle li:nth-child(4){
        
        left: 75vw;
        /* 设置动画延迟时间 */
        animation-delay: 4s;
    }
    .circle li:nth-child(5){
        
        left: 90vw;
        /* 设置动画延迟时间 */
        animation-delay: 8s;
    }
    
    /* 定义动画 */
    @keyframes square {
        
        0%{
        
            transform: scale(0) rotateY(0deg);
            opacity: 1;
        }
        100%{
        
            transform: scale(5) rotateY(1000deg);
            opacity: 0;
        }
    }
    @keyframes circle {
        
        0%{
        
            transform: scale(0) rotateY(0deg);
            opacity: 1;
            bottom: 0;
            border-radius: 0;
        }
        100%{
        
            transform: scale(5) rotateY(1000deg);
            opacity: 0;
            bottom: 90vh;
            border-radius: 50%;
        }
    }
    </style>
    </html>

2，效果图  
![在这里插入图片描述][5539f6e147cc41b88769117d27c10413.png_pic_center]  
![在这里插入图片描述][4b45014ac4dc4e65a5d297054e6769c5.png_pic_center]  
代码 `代码片`.

<!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>
     
        <script src="../js/jquery-3.6.0.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>
    <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/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);
    }
    </style>
    </html>

希望对大家的学习有所帮助。本文仅供参考，若有问题请帮忙留言指出，欢迎交流学习。获取更多资源请关注微信公众号： 俊俊同学的笔记  
![在这里插入图片描述][3f92ac3b7cee42a0b9a9c06cd541a11b.png_pic_center]

[eefd05cc472b4f39b3cc89b40bb97ead.png_pic_center]: https://img-blog.csdnimg.cn/eefd05cc472b4f39b3cc89b40bb97ead.png#pic_center
[5539f6e147cc41b88769117d27c10413.png_pic_center]: https://img-blog.csdnimg.cn/5539f6e147cc41b88769117d27c10413.png#pic_center
[4b45014ac4dc4e65a5d297054e6769c5.png_pic_center]: https://img-blog.csdnimg.cn/4b45014ac4dc4e65a5d297054e6769c5.png#pic_center
[3f92ac3b7cee42a0b9a9c06cd541a11b.png_pic_center]: https://img-blog.csdnimg.cn/3f92ac3b7cee42a0b9a9c06cd541a11b.png#pic_center