用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. 【转】BAT取当前日期的前一天

    ============================取前一天的日期       OK============================@echo off ::前一天的日期,格式化输出echo ...

  2. 2018 java实训总结（时间戳&&主键）

    java实训题目:源管理系统. 答辩的时候被老师怼了以下几个的地方: 1.主键改变了 2.没时间戳却说自己的程序里有先后(这就是老师迂腐了,主键自增可以间接反馈出他加入的早晚,即使主键做出了改变但只是 ...

  3. jq实现回车键执行方法

    $(function(){ $(document).keypress(function (e){ if(e.keyCode == 13){ //执行你想执行的方法,keyCode代表不同的按键 } } ...

  4. python 补0的方法

    # 方法一 z = 'bb' z.zfill(6) ----'0000bb' n = ' n.zfill(5) ----' # 方法二 ' " ---- ＇报错＇ # 方法的区别 方法二只能 ...

  5. 10小时之内，暴力破解SSH账号的IP

    10小时之内,暴力破解SSH账号的IP,IP 地址数据来源于  ip138.com 182.18.76.246 北京市昌平区 北京亿安天下网络科技有限公司 联通 221.223.200.143 北京市 ...

  6. [NOI.AC#34]palinedrome 字符串hash+贪心

    容易看出,只要从两边往中间扫描,碰到相等的就直接分割然后加入答案即可,判断相等用字符串hash #include<bits/stdc++.h> #define REP(i,a,b) for ...

  7. thinkphp内置标签简单讲解

    thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...

  8. thinkphp缓存使用

    thinkphp缓存使用 一.总结 1.这里的缓存不是指的缓存的页面,而是cache,如果你缓存了一个数组,那么你就可以取出这个数组里面的数据进行使用,用法性质和cookie和session有点像 2 ...

  9. yarn的安装和使用

    yarn的简介: Yarn是facebook发布的一款取代npm的包管理工具. yarn的特点: 速度超快. Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载. 同时利用并行下载以最大化资源 ...

  10. 老调重弹：JDBC系列 之 &lt;驱动载入原理全面解析&gt;

    前言 近期在研究Mybatis框架,因为该框架基于JDBC.想要非常好地理解和学习Mybatis,必需要对JDBC有较深入的了解.所以便把JDBC 这个东东翻出来.好好总结一番,作为自己的笔记,也是给 ...