动态滑动登陆框

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>动态滑动登陆框</title>

        <link rel="stylesheet" href="index.css">

        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

        </script>

    </head>

    <body>

        <div class="show-login-btn"><i class="fas fa-arrow-alt-circle-right"></i>Show Login Form</div>

        <div class="login-box">

            <div class="hide-login-btn"><i class="fas fa-times-circle"></i></div>

            <form class="login-form" action="index.html" method="post">

                <h1>Welcome</h1>

                <input class="txtb" type="text" placeholder="Username"/>

                <input class="txtb" type="password" placeholder="Password" />

                <input class="login-btn" type="submit" value="Login" />

            </form>

        </div>

        <script>

            $(".show-login-btn").on("click",function() {

                $(".login-box").toggleClass("showed");

            });

            $(".hide-login-btn").on("click",function() {

                $(".login-box").toggleClass("showed");

            });

        </script>

    </body>

</html>

引用了Font Awesome网站字体，需要登陆邮箱才能显示图标。

body {

    margin: 0;

    padding: 0;

    background: #333;

}

.login-box {

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100vh;

    background-image: linear-gradient(45deg, #9fbaa8, #F2E205);

    transition: 0.4s;

}

.login-form {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    text-align: center;

}

.login-form h1 {

    font-weight: 400;

    margin-top: 0;

}

.txtb {

    display: block;

    box-sizing: border-box;

    width: 240px;

    background: #ffffff28;

    border: 1px solid white;

    padding: 10px 20px;

    color: white;

    outline: none;

    margin: 10px 0;

    border-radius: 6px;

    text-align: center;

}

.login-btn {

    width: 240px;

    background: #003F63;

    border: 0;

    color: white;

    padding: 10px;

    border-radius: 6px;

    cursor: pointer;

}

.hide-login-btn {

    color: #000;

    position: absolute;

    top: 40px;

    right: 40px;

    cursor: pointer;

    font-size: 24px;

    opacity: .7;

}

.show-login-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    border: 2px solid;

    padding: 10px;

    cursor: pointer;

}

.showed {

    left: 0;

}

动态滑动登陆框-Html+Css+Js的更多相关文章

  1. js活jQuery实现动态添加、移除css/js文件

    下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...

  2. 拖动登录框 HTML+CSS+js

    先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  4. CSS动态实现文本框清除按钮的隐藏与显示

    当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视):FireFox浏览器貌似任何类型的输入框都无动于衷 ...

  5. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  6. js中动态载入css js样式

    js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...

  7. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  9. 动态加载、移除js、css

    本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码.//JS写法 <s ...

随机推荐

  1. MOSFET管驱动电路的设计

    https://wenku.baidu.com/view/ae727da5caaedd3382c4d3b9.html?mark_pay_doc=2&mark_rec_page=1&ma ...

  2. Taylor公式原来可以这么简单

    1.Taylor公式 解决:含有高阶导数的中值定理或定积分.极限运算等题目 条件:f(x)在x=x0领域内(n+1)阶可导 结论:f(x)=Pn(x)+Rn(x) 2.x和x0的取值 3.Taylor ...

  3. 云效Flow如何实现阿里云ECS多环境发布

    一.背景 云效Flow基于标签功能实现阿里云ECS多环境发布,在软件开发和部署过程中,我们的软件往往需要在不同的运行环境中运行,例如:开发人员本地开发环境.测试团队的测试环境.还有类生产环境和生产环境 ...

  4. hdu 1078 FatMouse and Cheese（记忆搜）

    N*N的矩阵,每个格子上有一个值. 老鼠起始在(1,1),每次只能水平着走或垂直着走.且最多只能走K步.且走到的格子里的值必须比上一次呆的格子里的值大. 问老鼠最多收集到多少值. 思路: 记忆搜好写. ...

  5. 用python写一个自动化盲注脚本

    前言 当我们进行SQL注入攻击时,当发现无法进行union注入或者报错等注入,那么,就需要考虑盲注了,当我们进行盲注时,需要通过页面的反馈(布尔盲注)或者相应时间(时间盲注),来一个字符一个字符的进行 ...

  6. native连接远程mysql数据库

    1.环境 CentOS7.mysqld 8.0.19 2.登录数据库 #mysql -u root -p 2.修改root登录地址为%(任何IP) mysql> update user set ...

  7. CSS学习（二）选择符

    元素选择符:以元素名作为选择符(span{ color: red; }) 群组选择符:将两个选择符用逗号隔开构成群组(span, div{ color: red; }) 通用选择符:通用选择符(*)将 ...

  8. Jmeter 踩坑记录（七）

    1.master连不上Slave机 解决方法:telnet 192.168.xx.xx 1099  看IP 端口通不通,如果通 OK,不通,检查关闭防火墙或者开放端口 2.salve 连不上 mast ...

  9. RISCV 入门 (学习笔记)

    文章目录 1. risv 相关背景 1.1 arm 授权费 1.2 riscv 发展历史 1.3 riscv 风险 2. 指令集 2.1 可配置的通用寄存器组 2.2 规整的指令编码 2.3 简洁的存 ...

  10. BAT面试必问细节：关于Netty中的ByteBuf详解

    在Netty中,还有另外一个比较常见的对象ByteBuf,它其实等同于Java Nio中的ByteBuffer,但是ByteBuf对Nio中的ByteBuffer的功能做了很作增强,下面我们来简单了解 ...