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

<!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. delphi添加.ocx后缀的控件

    在delphi ocx控件的安装步骤:1.第一步: 使用过Activex的人都知道,Activex不注册是不能够被系统识别和使用的,一般安装程序都会自动地把它所使用的Activex控件注册,但如果拿到 ...

  2. Verilog HDL VGA Driver for Xilinx Nexys 4 适用于Nexys4的VGA驱动

    /* * Function: VGA Timing Generator * Author: Liutianchen * Date: 2016-12-5 * Version: 6.0 * Environ ...

  3. C#高级特性：动态绑定

    C#高级特性:动态绑定 动态绑定 动态绑定将类型绑定(类型解析.成员和操作过程)从编译时推迟到了运行时.在编译时,如果程序员知道某个特定函数.成员的存在而编译器不知道,那么这种操作是非常有用的,这种情 ...

  4. centos6和7的防火墙开关

    CentOS6.5查看防火墙的状态: 1 [linuxidc@localhost ~]$service iptable status 显示结果: 1 2 3 4 5 [linuxidc@localho ...

  5. Oracle彻底卸载

    Oracle彻底卸载 卸载:oracle卸载1.删除注册表:打开注册表:regedit 打开路径: <找注册表 :开始->运行->regedit> HKEY_LOCAL_MAC ...

  6. python字符串的切片

    # 字符串的切片 """ (5)字符串的切片 :切片就是截取字符串的意思 (1)语法 =>字符串[::] 完整格式:[开始索引:结束索引:间隔值 (2)[:结束索引 ...

  7. linux的档案权限和目录配置

    Linux一般将档案可存取的身份分为三个类别,分别是 owner/group/others /etc/passwd  账号信息 /etc/shadow 个人密码 /etc/group    组名记录 ...

  8. [AIR] AS3读取本地文件夹中的文件

    import flash.filesystem.File; import flash.net.URLLoader; //var dir:File = File.desktopDirectory; // ...

  9. [ActionScript 3.0] flash中的颜色

    在 Flash 中,颜色就是一串特殊的数字,一个颜色值可以是0到16,777,215中的任意数值,这就是24位(bit)色彩.也许大家会问,为什么有16,777,216(256*256*256)种颜色 ...

  10. jquery事件三 -- load(), ready(), resize()以及bind()事件

    例子1 ready() DOM加载完毕 load() 元素加载完毕 resize() 浏览器窗口的大小发生变化 <!DOCTYPE html> <html lang="en ...