动态滑动登陆框

<!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. qwt使用细节

    在使用QWT进行二维曲线绘制,使用方法如下: class Plot: public QwtPlot { Q_OBJECT -- } 报错:error LNK2001: 无法解析的外部符号"p ...

  2. IDA*、操作打表、并行处理-The Rotation Game HDU - 1667

    万恶之源 优秀题解 用文字终究难以穷尽代码的思想 思路 每次操作都有八种选择,相当于一棵每次延申八个子节点的搜索树,故搜索应该是一种方法.而这题要求求最少步数,我们就可以想到可以试试迭代加深搜索(但其 ...

  3. Go并发编程--Mutex/RWMutex

    目录 一.前言 二. Mutex 2.1 案例 三. 实现原理 3.1 锁的实现模式 3.2 Go Mutex 实现原理 3.2.1 加锁 3.2.2 解锁 四. 源码分析 4.1 Mutex基本结构 ...

  4. undefined reference to `recvIpcMsg(int, ipc_msg*)'——#ifdef __cplusplus extern "C" { #endif

    最近在弄一个进程间通信,原始测试demon用c语言写的,经过测试ok,然后把接口封装起来了一个send,一个recv. 使用的时候send端是在一个c语言写的http服务端使用,编译ok没有报错,但是 ...

  5. 就因为把int改成Integer，第2天被辞了

    本文节选自<设计模式就该这样学>之享元模式(Flyweight Pattern) 1 故事背景 一个程序员就因为改了生产环境上的一个方法参数,把int型改成了Integer类型,因为涉及到 ...

  6. SpringCloud微服务实战——搭建企业级开发框架（十二）：OpenFeign+Ribbon实现负载均衡

      Ribbon是Netflix下的负载均衡项目,它主要实现中间层应用程序的负载均衡.为Ribbon配置服务提供者地址列表后,Ribbon就会基于某种负载均衡算法,自动帮助服务调用者去请求.Ribbo ...

  7. SpringCloud升级之路2020.0.x版-29.Spring Cloud OpenFeign 的解析(1)

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 在使用云原生的很多微服务中,比较小规模的可能直接依靠云服务中的负载均衡器进行内部域名与服务 ...

  8. 学信网改绑手机号码，但是忘记了老号码怎么办？利用node.js + puppeteer 跑脚本实现改绑手机号

    最近登录学信网发现自己学信网上绑定的手机号码不是目前自己使用的手机号码,于是想改绑手机号,但是发现不记得之前的手机号码了: 于是百度各种方法都无济于事:也不想重新注册账号,最后看见一篇文章通过Pyth ...

  9. RabbitMQ保证消息的顺序性

    当我们的系统中引入了MQ之后,不得不考虑的一个问题是如何保证消息的顺序性,这是一个至关重要的事情,如果顺序错乱了,就会导致数据的不一致.       比如:业务场景是这样的:我们需要根据mysql的b ...

  10. FZU ICPC 2020 寒假训练 6 —— 字符串处理

    P1603 斯诺登的密码 题目描述 2013年X月X日,俄罗斯办理了斯诺登的护照,于是他混迹于一架开往委内瑞拉的飞机.但是,这件事情太不周密了,因为FBI的间谍早已获悉他的具体位置--但这不是最重要的 ...