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. ElasticSearch改造研报查询实践

    背景: 1,系统简介:通过人工解读研报然后获取并录入研报分类及摘要等信息,系统通过摘要等信息来获得该研报的URI 2,现有实现:老系统使用MSSQL存储摘要等信息,并将不同的关键字分解为不同字段来提供 ...

  2. windows 定时备份linux 上oracle 数据库

    1.bat 脚本 exp root/root@10.0.0.0:1521/feiye grants=y owner=root file='E:\code\environment\mysqlBackDa ...

  3. prometheus监控示例

    prometheus架构图 prometheus 各组件介绍 Prometheus Server: 使用pull方式采集监控数据,在该组件上配置监控数据的采集和告警规则. Client Library ...

  4. zzw原创_非root安装fastDFS

    zzw原创_非root安装fastDFS fastDFS 想要非root安装,没找到资料,分析了一下安装脚本,原来作者是留了安装路径的,但没有放出来. 1.解包 [bdc@svr001 setup]$ ...

  5. react生命周期-新增与替换

    class A extends React.Component { // 用于初始化 state constructor() {} // 用于替换 `componentWillReceiveProps ...

  6. 初学python之感悟

    python的强大有目共睹,现将初学python,觉得其中比较重要的知识罗列如下: 类似于数组的东西:列表.元组.集合.字符串以及字典,这几个东西充分体现了python的强大和逆天. 列表: x=[1 ...

  7. javaScript简单的留言板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 页面中直接显示FTP中的图片

    页面中直接显示FTP中的图片 FTP根目录下有一张图片,如下 第一步: 通过如下格式,在浏览器上输入路径,确定可看到图片 ftp://root:root@127.0.0.1/111.png ftp:/ ...

  9. netty解码器详解（小白也能看懂！）

    什么是编解码器? 首先,我们回顾一下netty的组件设计:Netty的主要组件有Channel.EventLoop.ChannelFuture.ChannelHandler.ChannelPipe等. ...

  10. navicat for mysql 12中文破解版（安装+破解）--亲测可用

    http://www.ddooo.com/softdown/129457.htm#dltab