登陆界面背景动画的css样式

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

<!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>
时间： 2024-08-05 05:44:44

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

Axure中的登陆界面和动画轮播

1.登陆界面的创建 首先我们在主页面建立一个登陆界面基本框架,然后在元件交互和注释下的名称框下定义登陆框和密码框,然后在主页里面新增页面,在新增的页面里面写出登陆成功出现的情况,在另一个新页面创建出登陆失败的情况.这些做好了之后单击主页面的确定标签,这时会在元件交互注释下出现**鼠标单击时**,双击它就会出现用例编辑器,双击用例1就出现条件生成器一然后在元件文字这一行进行设置,设置好之后再添加另一个元件文字,这时依上设置就可以了,设置完了之后点击确定,这时就会返回用例编辑,然后在点击打开链接就会

设置div背景透明的CSS样式

div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity: 1.0; height:300px; width:500px; background:#ccc; left:50%; top:50%;margin-top:-150px;margin-left:-250px;position:absolute;z-index:99; text-align:cen

四个好看的CSS样式表格

文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相同,只是每一个格子里多了背景图. cell-blue.jpg cell-grey.jpg 1. 下载上面两张图,命名为cell-blue.jpg和cell-grey.jpg 2. 拷贝以下的代码到你想要的地方,记得改动图片url 3. 自己主动换整行颜色的CSS样式表格(须要用到JS) 这个CSS样

常用的四种CSS样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable th {

四个漂亮CSS样式表

1. 单像素的边框CSS表格 这是一个非常所用的表格风格. 源码: <!-- CSS goes in the document HEAD or added to your external stylesheet --> <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-widt

四个漂亮的CSS样式表

1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: <!-- CSS goes in the document HEAD or added to your external stylesheet --> <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-wid

css样式之背景图片

1.css样式背景之使用图片来做为背景 example: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>页面一</title> <style> .logo{ background:url('image/gouwu.image

div+css登陆界面案例2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0px; padding:0px; font-size:12px; background-color: #1873a

div+css登陆界面案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> body{ margin: 0px; padding:0px; font-size:12px; background-color: #1873aa; text-align: center; overflow: hid