HTML：

<html lang="en">

<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">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.font.im/css?family=Playfair+Display" rel="stylesheet">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="login-box">
        <h1>Login</h1>
        <div class="text-box">
            <i class="fa fa-user fa1"></i>
            <input class="text-input1" type="text" placeholder="Username" name="" value="">
        </div>
        <div class="text-box">
            <i class="fa fa-lock fa2"></i>
            <input class="text-input2" type="password" placeholder="Password" name="" value="">
        </div>
        <input type="button" class="btn" value="Sign In">

    </div>
</body>

</html>

CSS：

body{
    margin:;
    padding:;
    font-family: 'Playfair Display', serif;
    background:url(./20.png);
    background-size: cover;
}
.login-box{
    width:280px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:white;
}
.login-box h1{
    text-align: center;
    font-size :40px;
    border-bottom: 2px solid #2e86de;
    margin-bottom:50px;
    padding:13px 0;
}
.text-box{
    width:100%;
    overflow: hidden;
    font-size:20px;
    padding:8px 0;
    margin:8px 0;

}
.text-box i{
    vertical-align:middle;
    width:26px;
    float: left;
    text-align: center;
}
.text-box input{
    vertical-align:middle;
    border:none;
    outline: none;
    background:none;
    color:white;
    font-size:18px;
    width:80%;
    float: left;
    margin:0 10px;
    border-bottom: 1px solid #54a0ff;
    transition: 0.4s;
}
.btn{
    width:100%;
    height:50px;
    background:none;
    border:2px solid #54a0ff;
    color:white;
    padding:5px;
    transition: 0.4s;
    font-size:25px;
    cursor: pointer;
}
.text-box input:focus{
    border-bottom: 2px solid #1dd1a1;
    width:100%;
}
.btn:hover{
    background:white;
    border:none;
    color:black;
    outline: none;
}

JQuery：

        $(".text-input1").focus(function(){
            $(".fa1").hide();
        })
        $(".text-input1").blur(function(){
            $(".fa1").show(500);
        })
        $(".text-input2").focus(function(){
            $(".fa2").hide();
        })
        $(".text-input2").blur(function(){
            $(".fa2").show(500);
        })

效果图：

CSS效果：不怎么样的登录表单的更多相关文章

  1. 圆角卖萌式登录表单和width的百分比值

    1.圆角恶意卖萌登录表单 小组要做一个网站,大学生社区那种,然后要做登陆界面然后还要做好看的登录界面,然后在书上看到了一个很漂亮的登陆界面,说来和一般的登陆界面没什么不同只是登录表单的边角被柔化了,变 ...

  2. CSS3/HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,不至于让用户看到一堆表单望而却步.今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外 ...

  3. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

  4. amazeui学习笔记--css（HTML元素3）--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  5. Vue + ElementUI的电商管理系统实例01 登录表单

    效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...

  6. wordpress 自定义登录表单

    wordpress 有很多插件支持自定义登录表单,本文讨论无插件形式. 自定义登录表单又分为两种 自定义登录表单 在前端创建一个登录页面

  7. Html登录表单阻止自动填充

    设置属性 autocomplete="off" 阻止浏览器从cache获取数据填充登录表单. <input type="text" name=" ...

  8. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  9. yii YII小部件 创建登录表单表单 Login表单

    YII框架必须遵循其表单的创建方法 登录模型错做与数据库操作模型是一致的,不同的是不跟数据库交互 ,用的是小部件,在创建表单之前,要在用户控制模块完成以下代码 protected --models - ...

  10. Yii创建前台和后台登录表单和通过扩展 CWebUser 增加信息到 Yii::app()->user

    我参考了这篇文章来构建项目的前台和后台的目录结构.感谢Andy的这篇文章.按照所有的步骤,您将有单独的前台和后台面板,如: http://localhost/index.php // 前台 http: ...

随机推荐

  1. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  2. 解决安卓JNI native 线程不能正常退出问题二

    直面这个解决方法的可以看我转载的博客            https://www.cnblogs.com/Carlsblog/p/9438016.html 本方法是个投机取巧法,不过也解决了不能正常 ...

  3. 从零开始学习Java多线程(三)

    本文主要对Java多线程同步与通信以及相关锁的介绍. 1 .Java多线程安全问题 Java多线程安全问题是实现并发最大的问题,可以说多线程开发其实就是围绕多线程安全问题开发,涉及之深,不是简简单单一 ...

  4. Linux 安装 Rabbit MQ

    安装socat yum -y install socat 下载erlang软件包,本文使用erlang-19.0.4版本,下面给出下载链接 wget http://www.rabbitmq.com/r ...

  5. list<实体类>互相嵌套和前台取值问题

    list<实体类>嵌套list<实体类>,必须保证嵌套的实体类里面有这个list对象,把这个list<实体类>当做一个对象 这是需要解析的数据,并把这些数据封装成l ...

  6. hbase-0.92.1表备份还原

    原表结构和数据 hbase(main):021:0* describe 'test' DESCRIPTION ENABLED {NAME => ', TTL = true > ', COM ...

  7. 洛谷P1140 基因匹配 //DP真正意义上的一血

    题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了44种核苷酸,简记作A,C,G,TA,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类基因工作组的任务 ...

  8. 不同浏览器中scrollHeight的比较

    每个浏览器的兼容性不同所以就有了如下判断方案 document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的 ...

  9. Ubuntu LNMP系统搭建Zabbix监控

    系统环境 操作系统类型:Ubuntu 系统环境版本:4.4.0-122-generic IP地址:192.168.152.118 第一步:选择适当的操作系统类型与各项的版本要求,我这边直接使用LNMP ...

  10. 数据库的数据进行改动，Cognos报表展示未及时更新

    1. 问题描述 手工修改了DB中的测试数据,但是返回报表看,数据还没有更新 2. 问题分析 这是因为Cognos为了查询效率设计了高速缓存的选项 3. 解决方案 方法1:在数据包端禁用高速缓存,那么所 ...