用bootstrap做一个背景可轮转的登录界面

一、总结

一句话总结：用css3的动画的 @keyframes 规则，制作轮转图。

1、用bootstrap做一个背景可轮转的登录界面？

a、动画部分用的animation动画，动态的切换背景图

@keyframes myfirst

{

    0%   {background:url("../img/1.jpg");}

    34%  {background:url("../img/2.jpg");}

    67%  {background:url("../img/3.jpg");}

    100% {background:url("../img/1.jpg");}

}

b、样式布置用的网格系统，offset-3实现居中

水平居中利用bootstrap的网格系统，offset-3向右移动3格.（网格系统中默认12个格）

<div class="form-horizontal col-md-offset-3" id="login_form">

二、用bootstrap做登入注册页面

效果图（由于2M的限制效果图大小不一致）

html代码
水平居中利用bootstrap的网格系统，offset-3向右移动3格.（网格系统中默认12个格）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>login</title>

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="container">

        <div class="form row">

            <div class="form-horizontal col-md-offset-3" id="login_form">

                <h3 class="form-title">LOGIN</h3>

                <div class="col-md-9">

                    <div class="form-group">

                        <i class="fa fa-user fa-lg"></i>

                        <input class="form-control required" type="text" placeholder="Username" id="username" name="username" autofocus="autofocus" maxlength="20"/>

                    </div>

                    <div class="form-group">

                            <i class="fa fa-lock fa-lg"></i>

                            <input class="form-control required" type="password" placeholder="Password" id="password" name="password" maxlength="8"/>

                    </div>

                    <div class="form-group">

                        <label class="checkbox">

                            <input type="checkbox" name="remember" value="1"/>记住我

                        </label>

                    </div>

                    <div class="form-group col-md-offset-9">

                        <button type="submit" class="btn btn-success pull-right" name="submit">登录</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

css部分
用css3的动画的 @keyframes 规则，制作轮转图。

body{

    background: url("../img/1.jpg");

    animation-name:myfirst;

    animation-duration:12s;

    /*变换时间*/

    animation-delay:2s;

    /*动画开始时间*/

    animation-iteration-count:infinite;

    /*下一周期循环播放*/

    animation-play-state:running;

    /*动画开始运行*/

}

@keyframes myfirst

{

    0%   {background:url("../img/1.jpg");}

    34%  {background:url("../img/2.jpg");}

    67%  {background:url("../img/3.jpg");}

    100% {background:url("../img/1.jpg");}

}

.form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}

/*阴影*/

.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}

input[type="text"],input[type="password"]{padding-left:26px;}

.checkbox{padding-left:21px;}
 
 

用bootstrap做一个背景可轮转的登录界面的更多相关文章

  1. .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单

    我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...

  2. 一个简单的jsp+servlet登录界面的总结

    这个登录界面我是用eclipse+tomcat7来实现的(网上比较多都是用myeclipse来做的) 1.首先是关于servlet部署的问题 首先你的servlet类要写在WEB-INF的Class文 ...

  3. 初识Jsp，JavaBean,Servlet以及一个简单mvc模式的登录界面

    1:JSP JSP的基本语法:指令标识page,include,taglib;page指令标识常用的属性包含Language用来定义要使用的脚本语言:contentType定义JSP字符的编码和页面响 ...

  4. .net，mvc使用bootstrap做一个标准后台

    今天准备搭一个公用后台,使用bootstrap,方便今后开发,顺便mark一下 后期列表页将使用kendo-ui,增强后台的效果 下面是代码... login页面 @{ Layout = null; ...

  5. Bootstrap 做一个简单的母版页

    随便搭的一个母版页,不太好看,只是为了看效果....请勿吐槽. 效果如图: 一.新建母版页,引入Bootstrap相关js文件 <link href="../css/bootstrap ...

  6. 使用bootstrap做一个响应式的页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 用Bootstrap做一个历史朝代表

    引入CDN,算好需要合并的单元格. <!DOCTYPE html> <html> <head> <!-- 移动设备 --> <meta name= ...

  8. 使用react-native做一个简单的应用－04界面主框架

    欢迎界面搭建完毕,我们接下来需要做的就是搭建应用程序的主体框架啦.首先我们看一下首页的截图: 从图中看到,我将首页分为了三部分:用黑色矩形表示的头部,绿色表示的内容和红色表示的底部. 下面我们需要解决 ...

  9. 做一个开源的小程序登录模块组件（token）

    先了解下SSO 对于单点登陆浅显一点的说就是两种,一种web端的基于Cookie.另一种是跨端的基于Token,一般想要做的都优先做Token吧,个人建议,因为后期扩展也方便哦. 小程序也是呢,做成t ...

随机推荐

  1. POJ 2391 Floyd+二分+拆点最大流

    题意: 思路: 先Floyd一遍两两点之间的最短路 二分答案 建图 跑Dinic 只要不像我一样作死#define int long long 估计都没啥事-- 我T到死辣--.. 最后才改过来-- ...

  2. javafx mouseEvent

    public class EffectTest extends Application { Path path; @Override public void start(Stage primarySt ...

  3. 运动识别之HOJ3D和HMM

    http://cvrc.ece.utexas.edu/Publications/Xia_HAU3D12.pdf   View Invariant Human Action Recognition Us ...

  4. UITouch 的使用

    直接上代码: touch 的四大状态.: // // TouchView.m // UI_practice_04 // // Created by lanouhn on 15/4/22. // Cop ...

  5. struts2中action手动获取參数

    struts2中action手动获取Session,jsp页面參数 1. ActionContext 在Struts2开发中,除了将请求參数自己主动设置到Action的字段中,我们往往也须要在Acti ...

  6. linux监测tomcat服务

    原文链接:https://blog.csdn.net/qq_37936542/article/details/81086928 项目上线之后,tomcat服务器有时候会莫名其妙的挂掉,利用shell写 ...

  7. 【Educational Codeforces Round 35 C】Two Cakes

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 直觉题. 感觉情况会很少. 毕竟间隔太大了.中间肯定有一些数字达不到. 有1肯定可以 2 2 x肯定可以 3 3 3也可以 2 4 ...

  8. 7.3 GROUP BY的“新”功能

    7.3 GROUP BY的"新"功能正在更新内容,请稍后

  9. eclipse中导入zico Maven项目

    zico源代码地址:https://github.com/jitlogic/zico 简单的说,git上同步的源代码需要先进行maven编译,然后导入eclipse. 如果没有配置好maven,请参考 ...

  10. hello word-python 入门

    今天正式开始学习python,先写一个最今经典的例子 helloword #!/usr/bin/python3.2 print("hello work!") 知识点: #!usr/ ...