为了达到更好的用户体验，登陆界面需要设计多张背景图进行动态切换

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style type="text/css">

  body{

    width:100%;

    height:100%;

    position:fixed;

  }

.login-section {

    width: 100%;

    height: 100%;

    background: url(map/img/1.png) 0% 0%;

    background-size: 100% 100%;

    animation-name: bg-test1;

    animation-duration: 10000ms;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}

@-webkit-keyframes bg-test1{

    0%{background:url(map/img/1.png) 0% 0%;background-size:100%  100%;}

    28%{background:url(map/img/1.png) 0% 0%;background-size:100%  100%;}

    33%{background:url(map/img/2.png) 0% 0%;background-size:100%  100%;}

    61%{background:url(map/img/2.png) 0% 0%;background-size:100%  100%;}

    66%{background:url(map/img/3.png) 0% 0%;background-size:100%  100%;}

    94%{background:url(map/img/3.png 0% 0%;background-size:100%  100%;}

    100%{background:url(map/img/1.png) 0% 0%;background-size:100%  100%;}

}

  </style>

 </head>

 <body>

    <div class="login-section">

    </div>

 </body>

</html>

登陆界面背景动画的css样式的更多相关文章

  1. 前台界面（2）---CSS 样式

    目录 1. 内联样式 2. 层叠样式表CSS 2.1. 类选择器 2.1.1. 颜色设置 2.1.2. 字号设置 2.1.3. CSS边框属性 2.1.4. 设置背景颜色 2.1.5. 设置布局边框 ...

  2. 设置div背景透明的CSS样式

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

  3. 表格CSS样式美化

    1. 单像素边框CSS表格 这是一个很常用的表格样式. <!-- CSS goes in the document HEAD or added to your external styleshe ...

  4. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  5. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  6. 四个漂亮CSS样式表

    1. 单像素的边框CSS表格 这是一个非常所用的表格风格. 源码: <!-- CSS goes in the document HEAD or added to your external st ...

  7. 四个漂亮的CSS样式表

    1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: <!-- CSS goes in the document HEAD or added to your external s ...

  8. Qt 之 模仿 QQ登陆界面——样式篇

    一.简述 今天晚上花了半天时间从QQ登录界面抠了些图,顺便加了点样式基本上实现了QQ的登陆界面全部效果.虽不说100%相似,那也有99.99%相似了哈O(∩_∩)O. QQ好像从去年开始,登录界面有了 ...

  9. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

随机推荐

  1. Ansible应用领域

    1.Ansible应用领域 Ansible的编排引擎可以非常出色地完成配置管理.流程控制.资源部署等多方面工作.与其他IT自动化产品相比较,Ansibe为你提供一种不需要安装客户端软件.管理简单.功能 ...

  2. opencv——pcb上找圆mark点（模板匹配）

    #include "stdafx.h" #include <cv.h> #include <highgui.h> #include <cxcore.h ...

  3. Spring.NET 整合Nhibernate

    因为最近无意中学了AOP ,所以想一探究竟,看看.net里这个Spring.Net 到底是怎么回事,请有需要的童鞋往下,不需要的请alt+w.因为是先配置的 Nhibernate 所以就从这个开始.开 ...

  4. .Net程序随系统开机启动(仿Foxmail托盘效果控制)

    对于使.NET程序随系统开机启动,最常用的可能就是向在注册表中注册开机启动项,或是建立Windows服务,使程序随系统启动而启动.这里以WinForm程序为例,测试Demo分享,同时附上对于程序托盘的 ...

  5. docker获取镜像很慢解决办法

    docker pull selenium/hub获取非常慢 可以使用docker中国的官方镜像加速 docker pull registry.docker-cn.com/selenium/hub 官方 ...

  6. Qt自动填写表单并点击按钮，包括调用js方法

    本篇博客参阅了很多其他大牛的文章,具体找不到了,还望包涵>_< 因为其他博客大都是只有主要代码,对于像我这种菜鸟,根本摸不着头脑,以此想总结一下,帮助新手尽快实现功能... 主要是调用了C ...

  7. 在Python程序中调用Java代码的实现

    <原创不易,转载请标明出处:https://www.cnblogs.com/bandaobudaoweng/p/10785766.html> 前言 开发Python程序,需求中需要用到Ja ...

  8. Django自带表User认证详解

    认证登陆(附方法实现代码,百度网盘拉取即可下载,激活码:gqt1) 在进行用户登陆验证的时候,如果是自己写代码,就必须要先查询数据库,看用户输入的用户名是否存在于数据库中: 如果用户存在于数据库中,然 ...

  9. Kid的某些跳刺套路

    需要按二段方向键的跳跃: 中途松开方向键的跳跃: 中途按下方向键的跳跃: 意想不到的小跳(如果上方有墙,小跳比大跳磕头跳的更远)(kid站的是最后的位置): 意想不到的小跳*2: 意想不到的小跳*3( ...

  10. php数据库编程---mysql扩展库

    1, Java有一种方式操作数据库, PHP有三种方式来操作mysql数据库.(1)mysql扩展库:(2)mysqli扩展库:(3)pdo: 2, mysql扩展库和mysql数据库区别 3, my ...