登录中的动态效果

最新推荐文章于 2024-05-21 20:41:36 发布
最新推荐文章于 2024-05-21 20:41:36 发布
阅读量289 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luosizhaojinjun/article/details/118940969
版权

在这里插入图片描述

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <link rel="stylesheet" href="css/style55.css">
    <link rel="stylesheet" href="css/layui.css">

<!-- <style>.groupname input{border: 1px solid red;}</style>
    <style>.groupname input{border: 1px solid blue;}</style> -->
</head>
<body>
<section>
    <div class="cheBackground">
        <div class="a1top">
            <img src="images/chebiao.png" alt="">
            <p>锡心TAXT <span>&nbsp; &middot; &nbsp;</span> 欢迎登录</p>

        </div>
        <div class="a1centre">
            <div class="centre_content">
                <div class="content_left">
                    <p>无锡巡游出租车欢迎您</p>
                </div>
                <div class="content_right">
                    <div class="headline">
                        <div class="headtop">
                            <h3>欢迎登录锡心TAXI</h3>
                            <div class="xixin">
                                <p>锡心TAXI后台管理中心</p>
                            </div>
                        </div>
                    </div>
                    <form>
                        <div class="groupyong">
                            <div class="groupming">
                                <label for="">用户名</label>
                                <div class="groupname">
                                    <!-- <input type="text" class="wrong input" id="login_user_name" name="username" aria-label="用户名" placeholder="请输入您的用户名"> -->
                                    <input class="input" id="login-username" type="text" aria-label="用户名" placeholder="请输入您的用户名">
				                    <div class="hint"></div>
                                </div>
                            </div>
                        </div>
                        <div class="groupmi">
                            <div class="groupming">
                                <label for=""> &nbsp; &nbsp;密码</label>
                                <div class="groupname">
                                    <!-- <input type="text" class="input" id="login_password" name="password" aria-label="密码" placeholder="请输入您的密码"> -->
                                    <input class="input" id="login-password" type="password" aria-label="密码" placeholder="请输入您的密码">
                                    <div class="hint"></div>
                                </div>
                            </div>
                        </div>
                        <div class="groupbutton">
                           <div class="deng">
                               <button>登&nbsp;录</button>
                           </div> 
                        </div>
                        <div class="groupfu">
                            <div class="fu_zong">
                                <div class="fu_in">
                                    <input type="checkbox" name="">
                                    <p>下次自动登录</p>
                                </div>
                                <p>记住密码</p>
                            </div>
                        </div>
                    </form>
                   
                </div>
            </div>
            <!-- <img src="images/denglvbeijing.png" alt=""> -->
        </div>
        <div class="afterbody">
            <p>Copyright © 南京交投科技有限公司版权所有 备案号：苏ICP备19018112号-1</p>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.signin-form').on('submit', function () {
                var $data = $(this).serialize();

                Dolphin.loading();
                $.post($(this).attr('action'), $data, function (res) {
                    Dolphin.loading('hide');
                    if (res.code) {
                        Dolphin.notify('登录成功，页面即将跳转~', 'success');
                        setTimeout(function () {
                            location.href = res.url;
                        }, 1500);
                    } else {
                        $('#captcha').click();
                        Dolphin.notify(res.msg, 'danger');
                    }
                }).fail(function () {
                    Dolphin.loading('hide');
                    Dolphin.notify('服务器错误~', 'danger');
                });
                return false;
            });
        });
    </script>
    <script type="text/javascript" src="js/form.js"></script> 
</section>
</body>
</html>

@charset "utf-8";
html,body {margin:0; padding:0; border:0; text-align:left; font-size:12px; line-height:1.8em;
    font-family:"Microsoft Yahei"; color:#000;}
.cheBackground{
    background: url(../images/chebeijing.jpg) no-repeat center;
    background-size: cover;
    
}
.a1top{
    padding-left: 240px;
    padding-top: 26px;
    padding-bottom: 130px;
    display: flex;
}
.a1top img{
  width: 40px;
  height: 32px;
}
.a1top p{
    font-size: 20px;
    color: #fff;
    margin-left: 10px;
    font-weight: 600;
}
.a1centre{
    height: 530px;
    display: flex;
    justify-content: space-around;
}
.centre_content{
    display: flex;
    width: 1050px;
  background: url(../images/denglvbeijing.png) no-repeat;  
}
.content_left{
    width: 524px;
    height: 520px;
}
.content_left p{
    font-size: 16px;
    color: #9db4df;
    margin-top: 420px;
    margin-left: 170px;
    letter-spacing: 4px;
}
.content_right{
    width: 524px;
    height: 520px;
}
.headline{
    display: flex;
    justify-content: space-around;
    margin-top: 91px;
    margin-bottom: 45px;
}
.headtop{
    justify-content: space-around;
}
.headtop h3{
    font-weight: 600;
    font-size: 25px;
    color: #000;
}
.headtop p{
    font-size: 15px;
    color: rgb(129, 129, 129);
}
.xixin{
    display: flex;
    justify-content: space-around;
    margin-top: 3px;
}
.groupyong{
    display: flex;
    justify-content: space-around;
}
.groupming{
    display: flex;
    margin-bottom: 30px;
    margin-right: 65px;
}
.groupming label{
    font-size: 16px;
    height: 42px;
    line-height: 42px;
    margin-right: 20px;
}
.groupname{
    position: relative;
    left: 20px;
    width: 340px;
}
.hint{
    float: left;
    margin-top: 12px;
    margin-left: 10px;
}

.groupname input{
    width: 300px;
    height: 42px;
    color: #000;
    padding-left: 12px;
    border: 1px solid #e6e6e6;
    float: left;
}
.groupname .right{
    border: 1px solid #4457d7;
}
.groupname .wrong{
    border: 1px solid red;
}

.groupmi{
    display: flex;
    justify-content: space-around;
}
.groupbutton{
    display: flex;
    justify-content: space-around;
}
.deng{
    margin-bottom: 25px;
}
.deng button{
    width: 300px;
    height: 42px;
    background-color: #4457d7;
    color: #fff;
    border-radius: 2px;
    border: 1px solid #4457d7;
}
.groupfu{
    display: flex;
    justify-content: space-around;
}
.fu_zong{
    width: 300px;
    display: flex;
    justify-content: space-between;
}
.fu_in{
    display: flex;
}
.fu_in input{
    margin-top: 4px;
    
}
.fu_zong p{
    color: rgb(129, 129, 129);
}
.fu_in p{
    color: #000;
    margin-left: 5px;
}
.afterbody{

    padding-top: 130px;
    display: flex;
    justify-content: space-around;
    padding-bottom: 45px;
}
.afterbody p{
    color: #fff;
}

(function(){
    var hintText={
            user_name:{hint:"⚠️请输入3-12个字符的用户名（包括字母/数字/下划线）",right:"<img src='images/dui.png' alt=''>",wrong:"<img src='images/cuo.png' alt=''>"},
            password:{hint:"⚠️请输入6位以上密码",right:"<img src='images/dui.png' alt=''>",wrong:"<img src='images/cuo.png' alt=''>"}
            };
    var regEvent=function(node, event, func){
        if (node.addEventListener)
            node.addEventListener(event, func);
        else if (node.attachEvent)
            node.attachEvent("on" + event, func);
        else
            node["on" + event] = func;
    };
    function regValue(id,i){
        var flag=false,
        input=document.getElementById(id),
        value=input.value;
        switch (id){
            case "user_name":
            // case "login_user_name":
            case "login-username":
            case "info_user_name":
                flag=/^[a-zA-Z0-9_]{3,16}$/.test(value.replace(/[\u0391-\uFFE5]/g,"nn"));
                id="user_name";
                break;
            case "password":
            // case "login_password":
            case "login-password":    
            case "info_password":
                flag=/^\S{3,16}$/.test(value);
                id="password";
                break;

        }
        if(flag) {
            index=0;
            input.className="right input";
            // hint[i].className="hint hint_right";
            hint[i].innerHTML=hintText[id].right;
        }else{
            input.className="wrong input";
            // hint[i].className="hint hint_wrong";
            hint[i].innerHTML=hintText[id].wrong;
            index=1;
        }
    };
    var inputs=document.getElementsByClassName("input"),
    id,
    hint=document.getElementsByClassName("hint"),
    index=0;
    for(var j=0;j<inputs.length;j++){
        (function(i){
            regEvent(inputs[i],"focus",function(){
                hint[i].style.visibility="visible";
                id=inputs[i].id;
            });
            regEvent(inputs[i],"blur",function(){
               regValue(id,i);
            });
        })(j)
    }
 
})();
luosizhaojinjun
关注
动态背景登录页面(基于jquery)
04-27
动态登录基于jquery做的，每隔几秒会自动将登录背景图片切换
登录效果
DcTbnk的博客
04-21 250
1
CSS/HTML 一个漂亮的用户注册（用户登录）页面 动态效果
热门推荐
qq_38959715的博客
06-26 10万+
先上效果图吧平面泡沫立体泡沫之前想做动态泡泡的效果，在网上没有搜到类似的样式。所以自己做了一个发上来，给有需要的人参考参考。代码部分有疑问或者有错请在评论指出，尽量快点回复。代码部分：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
前端H5动态背景登录页面（上）
qq_43826289的博客
03-05 6371
动态背景登录页面
css3动效登录表单
10-07
css3动效登录表单，简洁漂亮的登陆表单，纯css3实现
HTML炫酷背景动态效果 精选20+
03-29
内附几十种背景动态特效，可用作企业网站背景、个人博客主页背景，登陆页面背景等，非常炫酷，包含类型（3D场景、动画线分形、电流变形效果、过山车、海洋、黑洞效应、互动星空、生日祝福等...）
科技感动态效果引导页官网源码_引导页_
09-30
1. **动态过渡与动画**：源码中可能包含了丰富的CSS3动画效果，如滑动、淡入淡出、缩放等，这些动态效果能够使页面元素在用户滚动或交互时产生平滑的过渡，增加视觉吸引力。 2. **响应式布局**：科技感引导页通常会...
jquery实现动态登陆提示框（下拉提示效果）.zip
09-27
例如，使用`:hover`伪类可以实现鼠标悬停时的效果，`transition`属性可以平滑地改变元素的样式属性，而`animation`则能实现更复杂的动态效果。 然后，jQuery作为JavaScript库，简化了DOM操作、事件处理和动画制作。...
小熊动态动漫登陆界面
08-18
HTML用于构建页面结构，CSS则负责样式设计，使其符合整体网站的视觉风格，而JavaScript则用来实现动态效果，如小熊的动画。如果界面还包含了后端验证功能，可能还需要PHP、Python、Node.js等后端语言的配合，实现...
imGui_Login-main.zip好看动态登陆界面
09-10
c/c++编写的imgui登陆菜单，内置精美动态效果和图片界面，能够满足你对所有卡密登陆界面的想法，自定义写法，能够迁移到你自己的代码中，对有想实现卡密登陆的开发人员有较大帮助，内置多种先进写法，包含库的使用，...
loading登录动态图片
11-08
loading作登录的时候，显示的等待的图形界面，加载图形
登陆特效动画
07-27
登陆特效代码，动画，运用了flash，运用了线程，效果很好
jQuery实现百度登录框的动态切换效果
12-03
点击右下角图片进行状态切换,效果图 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度登录框</title> <style type="text/css"> *{margin: 0;padding: 0;} body { font-size: 12px; } a { text-decoration: none; color: #2647CB; } a:hover {
精美的登录页面（粒子特效+登录验证）
03-08
精美的登录页面（粒子特效+登录验证）
layui-用户登录界面响应式动画模板
06-01
登录页面动态制作，DOM元素，修改文字内容、元素样式、表单、计时器、轮播图、事件监听
最新发布
weixin_74620057的博客
05-21 1753
展示效果如下点开页面熊会自动跑到中间去并且一直处于奔跑动作。
动态登录与注册功能
yezikeji的博客
02-19 299
<?xml version="1.0" encoding="UTF-8"?> 4.0.0 org.springframework.boot spring-boot-starter-parent 2.4.2 springboot-web04 demo 0.0.1-SNAPSHOT demo Demo project for Spring Boot <java.version>1.8</java.version> org.springframework.bo
登录页面动态效果html,带CSS3动画特效的时尚登录界面UI设计
weixin_33869754的博客
06-03 2033
这是一款非常时尚的jQuery和CSS3登录界面UI设计。该登录界面采用扁平化风格，在用户点击登录按钮之后，界面会分为两个部分：一部分将原来的界面3D倾斜，另一部分是弹出一个带光波效果的loading指示器。该设计非常时尚和协调。制作方法该登录界面特效依赖于jQueryUI，使用时要引入相关依赖文件。HTML结构该登录界面的HTML结构分为2个部分：一个是登录界面div.login，另一个是显示登...
登陆界面如何生成动态验证码
商林松的博客
04-13 1万+
在设计登录界面时验证码是必不可少，本实例将简单的生成动态验证码。 根据个人需求将生成验证码代码放到不同的的地方，可以放到前段控制器中通过请求方式生成验证码，也可已将代码放到一个JSP页面通过应用JSP页面生成验证码 工具：J2EE 通过jsp生成验证码 源代码： &lt;%@ page language="java" contentType="text/html; charset...
CSS3实现3D旋转效果：登陆面板动态展示
这种动态效果可以增强用户体验，使登录过程更具吸引力。 总结来说，这篇文章教你如何运用CSS3的3D转换特性为登录面板创建动态旋转效果，包括设置透视、动画以及与用户交互的逻辑。通过理解和实践这段代码，开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值