用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. 认识Linux瘦客户机

           (本文完整版见http://os.51cto.com/art/201001/181448.htm)        随着Linux的发展,以及网络计算技术的发展和逐步深入的云计算,基于Li ...

  2. Java： 数据类型

    核心:对事物的某种规范   前提: 1.JAVA:JAVA程序的运行是以堆栈的操作来完成的  堆栈以帧为单位保存线程的状态.       JVM对堆栈只进行两种操作:以帧为单位的压栈和出栈操作. 理解 ...

  3. 2017国家集训队作业[arc076d/f][Exhausted?]

    2017国家集训队作业[arc076d/f][Exhausted?] 题意: ​ 有\(N\)个人,\(M\)把椅子,给出\(...L_i.R_i\)表示第\(i\)个人可以选择编号为\(1\sim ...

  4. Ansible学习记录五：PlayBook学习

    0.介绍 Playbooks 是 Ansible 管理配置.部署应用和编排的语言,可以使用 Playbooks 来描述你想在远程主机执行的策略或者执行的一组步骤过程等 类似于一组任务集,定义好像项目, ...

  5. 【习题 8-14 UVA - 1616】Caravan Robbers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分长度. 显然长度越长.就越不可能. 二分的时候.可以不用管精度. 直接指定一个二分次数的上限就好. 判断长度是否可行.直接用贪心 ...

  6. [TypeScript] Model Alternatives with Discriminated Union Types in TypeScript

    TypeScript’s discriminated union types (aka tagged union types) allow you to model a finite set of a ...

  7. Autodesk 招聘Revit二次开发咨询顾问，与Autodesk全球团队紧密合作，提高职业生涯的好机会

    朋友们, 因为我离开Autodesk的全职工作(变为部分时间工作),我的职位空出.急招这个职位.请踊跃把你周围的朋友推荐给Autodesk. 请将简历发给我转交给Autodesk 我的邮箱yexion ...

  8. 27.mutex跨进程通信

    创建互斥量mutex HANDLE mutex = CreateMutexA(NULL, TRUE, name); 根据id打开mutex HANDLE mutex = OpenMutexA(MUTE ...

  9. 使用SqlBulkCopy进行批量数据插入

    Dim dt As DataTable = New DataTable() dt.Columns.Add("DtCostProductRuleGUID", GetType(Guid ...

  10. Mahout项目开发环境搭建（Eclipse\MyEclipse + Maven）

    继续 http://www.tuicool.com/articles/rmiEz2 http://www.cnblogs.com/jchubby/p/4454888.html