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

<!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. 洛谷P2173 [ZJOI2012]网络(10棵lct与瞎jb暴力)

    有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这个图上,你 ...

  2. 你不知道的Console

    1.凡人视角 打印字符串 代码: console.log("I am a 凡人"); 打印提示消息 代码: console.info("Yes, you arm a 凡人 ...

  3. linux命令の删除文件和文件夹 复制粘贴文件和文件夹

    声明:此博文来自百度经验http://jingyan.baidu.com/article/642c9d34dcba80644a46f72d.html,谢谢分享! linux删除目录很简单,很多人还是习 ...

  4. python，使用百度api实现复制截图中的文字

    百度云文字识别技术文档: 跳转 第三方模块安装: pip install baidu-aip pip install Pillow pip install keyboard pip install p ...

  5. Template 动画

    如果设置Template的动画,也就意味着对每一个具有此Template的对象进行动画处理. 比如对ListBoxI的ItemTemplate进行设置,添加动画,触发器等,每一个ListBoxItem ...

  6. 【OCP-12c】CUUG最新考试原题整理及答案（071-9）

    9.(5-5) choose the best answerView the Exhibit and examine the structure of the SALES and STORES tab ...

  7. php面向对象编程_2

    1, 抽象类 ,用abstract关键字来修饰一个类,这个类就是抽象类:如果用abstract关键字来修饰一个方法,这个方法就是抽象方法,如果是抽象方法就不能实现(即抽象方法只能声明,不能定义). 抽 ...

  8. mycat 1.6.6.1安装以及配置docker 安装mysql 5.7.24 双主多从读写分离主主切换

    mycat和mysql的高可用参考如下两个图 简介:应用程序仅需要连接HAproxy或者mycat,后端服务器的读写分离由mycat进行控制,后端服务器数据的同步由MySQL主从同步进行控制. 服务器 ...

  9. python3入门之函数

    相信大家学习过其他语言,懂得函数的作用.简单的说函数最好的作用就是可以使程序变得懒惰.python作为后起之秀,当然也会拥有函数这个有用的东西: 创建函数 使用def语句即可创建函数,如创建一个用来生 ...

  10. 条目二十六《iterator优先于const_iterator、reverse_iterator以及const_reverse_iterator》

    条目二十六<iterator优先于const_iterator.reverse_iterator以及const_reverse_iterator> 这几个东西不是类型来的,而是不同的类,所 ...