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

<!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 xe5如何使用Bluestacks模拟器（用真机或者用猩猩，夜神模拟器，自带的不好用）

    首先,关于这个模拟器问题比较纠结,这是一个关于adb的问题. Delphi XE5会自动识别模拟器和真机,但是你必须先打开模拟器在打开Delphi IDE(Delphi开发环境),否则还得麻烦一会儿. ...

  2. [leetcode] 3. Pascal's Triangle

    第三道还是帕斯卡三角,这个是要求正常输出,题目如下: Given numRows, generate the first numRows of Pascal's triangle. For examp ...

  3. ArrayList用法详解与源码分析

    说明 此文章分两部分,1.ArrayList用法.2.源码分析.先用法后分析是为了以后忘了查阅起来方便-- ArrayList 基本用法 1.创建ArrayList对象 //创建默认容量的数组列表(默 ...

  4. 实验1 C语言运行环境的使用和数据类型、运算符和表达式

    Part1 这一部分的内容虽然简单,但是对于初学的我来说,独自完成且没有错误还是不容易的,像老师说的一样,只有自己亲手编写以后才可以发现问题并且逐步改正.从这次实践我对与C语言程序的结构更加熟悉.   ...

  5. secureCRT颜色方案设置

    按照如下设置后vim编辑会有如下颜色提示

  6. Spark - 经典案例

    初识 Spark 大数据处理,目前还只是小白阶段,初步搭建起运行环境,慢慢学习之. 本文熟悉下 Spark 数据处理的几个经典案例. 首先将 Scala SDK 的源码导入 IDEA,方便查看和调试代 ...

  7. Tomcat安装与使用

    主要讲解Tomcat的 安装与使用,讲解ubuntu版本和windows. 下载与安装: 1)到apache官网.www.apache.org http://jakarta.apache.org(产品 ...

  8. python 绘制抛物线

    %matplotlib inlineimport matplotlib.pyplot as plt import numpy as npx = range(100) y = [val**2 for v ...

  9. npm淘宝镜像和默认镜像切换

    1.得到原本的镜像地址 npm get registry > https://registry.npmjs.org/ 设成淘宝的 npm config set registry http://r ...

  10. P4304 [TJOI2013]攻击装置 最小割

    $ \color{#0066ff}{ 题目描述 }$ 给定一个01矩阵,其中你可以在0的位置放置攻击装置. 每一个攻击装置(x,y)都可以按照"日"字攻击其周围的8个位置(x-1, ...