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. 《CoderXiaoban团队》第一次作业：团队亮相

    实验五 这个作业属于哪个课程 软件工程任教教师 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/10687492.html 团队名称 CoderXiao ...

  2. js里面的Object基本

    属性名必须是字符串,非字符串对象不能用来作为一个对象属性的键,任何非字符串对象,包括number,可通过toString()方法,类型转换成一个字符串1 1,Object基本格式 <script ...

  3. gevent模块学习(三)

    3. Group类,常用于不限制数量的管理异步任务的分组且可搜集运行结果 g = gevent.pool.Group(*args) -> Group 说明: 创建一个组对象,其实就是一个不限gr ...

  4. sys 模块的应用

    1.常见的sys模块的应用: 1.在解释器启动后, argv 列表包含了传递给脚本的所有参数, 列表的第一个元素为脚本自身的名称 argv(命令行参数个数) #!/usr/bin/env python ...

  5. linux常用命令 echo输出命令

    echo输出命令 'echo [选项] [输出内容]' 选项 '-e' 支持反斜线控制的字符转换 控制字符​ \a 输出警告音 \b 退格键,也就是向左删除键 \n 换行符 \r 回车键 \t 制表符 ...

  6. freemarker导出word档

    1.word另存为xml:2.xml文件后缀名改成ftl:3.编写完整json字符串备用:4.修改ftl中动态字段为json中对应字段名:5.编写java代码自动生成word文件:(注意:换行用< ...

  7. XAMPP本地服务器打不开解决方案

    第一步:先开启相关服务:如图 第二步:在浏览器上输入localhost:端口号,(或127.0.0.1:端口号),按回车,就成功登陆本地服务器. =========================== ...

  8. java第二次笔记

  9. c#基础之异常处理及自定义异常

    一.什么是c#中的异常? 异常是程序运行中发生的错误,异常处理是程序的一部分.c#中的异常类主要是直接或者间接的派生于 System.Exception类 ,也就是说System.Exception类 ...

  10. 【js高程学习笔记】Object类型

    创建一组Object的实例的方式有两种: 方法一: var person = new Object(); person.name = '团子'; person.race = '猫'; person.s ...