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. 使用pyinstaller打包多个py文件为一个EXE文件

    1. 安装pyinstaller. pip install pyinstaller !!!!64位win7上打包后始终不能用,提示找不到ldap模块,换了32位win7就好了.!!!!(代码中涉及ld ...

  2. pom中Maven插件 配置 maven-dependency-plugin maven-surefire-plugin

    使用Maven插件将依赖包 jar包 war包及配置文件输出到指定目录 1|0写在前面 ​ 最近遇到一个朋友遇到一个项目需要将 maven 的依赖包和配置文件分开打包然后用脚本执行程序.这样的好处在于 ...

  3. android -------- RecyclerView的可（多个Item水平，垂直）滚动列表的实现

    RecyclerView的可滚动的列表实现,视图相邻的视图在屏幕上部分或完全可见(水平3个item,第一个和第三个显示一部分,第二个完全显示) 效果如图: 基于RecyclerView完成的(自定义控 ...

  4. requests库/爬取zhihu表情包

    先学了requests库的一些基本操作,简单的爬了一下. 用到了requests.get()方法,就是以GET方式请求网页,得到一个Response对象.不加headers的话可能会400error所 ...

  5. 版本控制，django缓存，跨域问题解决

    复习 分页: 1. 简单分页 2. 偏移分页 3. 加密分页 解析器:客户处理前端提交来的数据 urlencode: body体中的数据格式: key=value& formdata编码:为区 ...

  6. css3 翻牌动画

    最近做了一个特效,css是从网上找的,地址是这个: CSS3 animate flip下的纸牌翻转效果实例页面 把其中核心的css代码扒出来如下: /* The properties in this ...

  7. Win10系列：C#应用控件进阶4

    多边形 若要绘制多边形需要用到Polygon元素,并通过定义一系列的点绘制多边形.Polygon类型的对象有Points属性, 这个属性用来定义组成边的点集.在前台代码中,使用空格分隔各个点,然后利用 ...

  8. Rhino模型制作——京东狗（练习网格切割）

    我最近做了一个京东狗的模型,我先把渲染好的模型给大家看一下. 别看这个模型很复杂,其实京东狗的模型是网上找的,我只是做了一个上面的洞.不过我告诉大家Rhino的下载地址:http://www.xuex ...

  9. winfrom程序文本框第一次选中问题

    想实现这样的功能: 就是在panel中的文本框,当第一次点击文本框时,全选文本框的内容:再次选择时,可以全选,也可以部分选中, 可是文本框总是从左全部选中,还不能从右边选择,在Enter或Down事件 ...

  10. aspectj编程简介

    现在java生态中spring大行其道,一般使用aspectj进行切面编程使用注解方式实现,比较少使用原生的aspectj编程,网上的资料也比较少.最近工作中需要封装redisson客户端提供统一的r ...