用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. 82.QT实现委托构造

    #include "mainwindow.h" #include <QApplication> //创建一个MainWindow类 class myclass { pr ...

  2. 分享一个关于js原型链的理解

    http://www.cnblogs.com/wyaocn/p/5815761.html

  3. 搭建Spark源码研读和代码调试的开发环境

    转载自https://github.com/linbojin/spark-notes/blob/master/ide-setup.md 搭建Spark源码研读和代码调试的开发环境 工欲善其事,必先利其 ...

  4. hdu 1003 Max Sum 最大字段和 dp

    今天看了一上午dp.看不太懂啊.dp确实不简单.今天開始学习dp,搜了杭电的dp46道,慢慢来吧.白书上的写的 又不太具体,先写几道题目再说. .. 题目连接:id=516&page=1&qu ...

  5. Oracle Sqlplus中上下键出现^[[A乱码问题

    安装rlwrap  下载:http://utopia.knoware.nl/~hlub/uck/rlwrap/ 或者 百度云盘:http://pan.baidu.com/s/1ntM8YXr 须要先安 ...

  6. 有点坑爹的GDALComputeRasterMinMax函数

    作者:朱金灿 来源:http://blog.csdn.net/clever101 GDALComputeRasterMinMax函数是gdal库为了求取指定波段的极值而提供的接口.最近看了这个接口的源 ...

  7. Vue的style与class

    1. style 可以通过 :style="{height:`${heightData.main}px`}" 实现样式的动态绑定, style绑定的是一个对象,多个样式时用“,”隔 ...

  8. pycharm 注册 License server方式

    在输入框输入以下内容即可:http://idea.yangyusb.com

  9. MockServer jar包安装

    github地址: https://github.com/jamesdbloom/mockserver 1. org.apache.maven.plugin-tools:maven-plugin-an ...

  10. canvas.toDataURL() gives “Security Error” in IE 11

    http://stackoverflow.com/questions/30101143/canvas-todataurl-gives-security-error-in-ie-11