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. 自学Python Day1

          Day1: 强制转换,打印类型.Python2(row input)=Python3 input   input(Python2)不接受强制转换,输入和输出是一致的.加双引号是字符串,不加 ...

  2. 爬坑！OpenCV打开双目摄像头

    1.首先找到双目摄像头的VideoCapture的设备号,记住定义时要采用降序的方法定义:cv::VideoCapture Rcap(1); cv::VideoCapture Lcap(0); 2.分 ...

  3. WCF：一个棘手的问题

    前言 在做即时通信项目时,手上另一个项目的颠簸,即时通信项目一直是改改停停的,一些改动比较小,没有即时的签入,然后一段时间本地的项目代码与源代码存在不少区别,在这种情况下,因为新的需求添加,需要给WC ...

  4. OneNote无法打开链接出现错误：你的组织策略阻止我们为你完成此操作

    首先打开注册表编辑器,按键盘win+r,调出运行窗口,输入regedit打开注册表编辑器 打开HKEY_CURRENT_USER\Software 打开\Classes 最后选中.html,在默认选项 ...

  5. leetcode感想

    想想要参加秋招了,重新开始刷leetcode,记录一下自己在过程遇到的问题. 算法优化: 1.合并if分支. 2.将所有可以直接给出结果的特殊情况放在最前面直接返回.

  6. 在Linux和Windows之间的远程控制的实现

    主要开发工作用Linux,邮件和文档等主要在Windows,两者之间经常需要传输数据,两台主机都必须同时运行着. 但是,通常来说,它们需要同时准备两套显示器.鼠标和键盘,既占地方又不够方便. 远程控制 ...

  7. centos 日志文件

    以下介绍的是20个位于/var/log/ 目录之下的日志文件.其中一些只有特定版本采用,如dpkg.log只能在基于Debian的系统中看到./var/log/messages — 包括整体系统信息, ...

  8. 在form表单里上传图片

    需要上传多个图片分别上传,本来提供的工具类里上传一张可以form表单对象实现 后台用MultipartFile file var formdata = new FormData($("#in ...

  9. 阿里云服务器报 Liunx异常文件下载处理办法

    阿里云服务器报 Liunx异常文件下载.挖矿进程.SSH远程非交互式一句话异常指令执行 清除办法 1.删除crontab里面的自启动脚本 2.删除authorized_keys 里面密匙 3.删除#/ ...

  10. Spring MVC学习step1——框架熟悉

    b站视频链接,整理的一些笔记,图是网上找到的黑马教案,侵权删,在此记录学习笔记 SpringMVC框架 步骤: 第一步:发起请求到前端控制器(Dispatcherservlet) 第二步:前端控制器请 ...